2025-11-24(리액트 state, props)

컴포넌트 (Component)

• 리액트 UI의 최소 단위 (하나의 기능 화면 조각)
• 여러 컴포넌트를 합쳐서 하나의 페이지를 구성
• 최상위 컴포넌트는 App.jsx (Root Component)

컴포넌트 규칙

• 파일명 & 함수명 대문자로 시작
• 반드시 하나의 부모 요소만 return
• 재사용 가능
• 자식 컴포넌트 안에서 다른 컴포넌트 호출

App3.jsx

export default function App3() {
  return (
    <div>
      <h1>컴포넌트 연습</h1>
    </div>
  );
}

main.jsx

import App3 from './App3.jsx'
ReactDOM.createRoot(...).render(<App3 />);

Props(부모  -> 자식 데이터 전달)

• Html 태그에 속성을 넣듯이 컴포넌트에 값을 전달
• 자식 컴포넌트는 객체 형태로 받음 

부모

<Header title="홈페이지" />

자식

function Header(props){
  return <h1>{props.title}</h1>
}

State (컴포넌트의 상태)

const [count, setCount] = useState(0);

 

• state 값이 변경되면 자동으로 화면 리렌더링됨
• props 변경 시에도 리렌더링됨
• 부모가 렌더링되면 자식도 렌더링됨

useEffect(부가 작업 처리)

랜더링 외의 작업들 제어

• 서버 통신
• mqtt 연결
• 타이머
• 스크롤 이벤트

useEffect(() => {
  // 실행될 코드
}, []);

 

빈 배열

[]

처음 1번만 실행됨

배열 생략

렌더링될 때마다 실행됨

특정 값 감지

useEffect(() => {
  console.log("count changed");
}, [count]);

cleanup(정리 작업)

mqtt 연결 종료, 타이머 제거

useEffect(() => {
  console.log("start");

  return () => {
    console.log("cleanup");
  };
}, []);