React는 컴포넌트 기반의 아키텍처를 사용합니다. UI를 작은 컴포넌트로 나누고 이 컴포넌트들을 조합하여 완전한 UI를 생성합니다. 컴포넌트 내부에서 데이터를 동적으로 변경해야 하는 경우 ‘상태(State)’를 사용하며, 이를 통해 컴포넌트는 자체적으로 데이터를 관리하고 업데이트할 수 있습니다. 컴포넌트 간 데이터 전달은 단방향으로 ‘props’를 통해 이루어지며, 상위 컴포넌트가 하위 컴포넌트에 데이터를 전달합니다. 하위 컴포넌트는 해당 데이터를 읽을 수만 있고 직접 수정할 수 없습니다. 이러한 React의 데이터 전달 방식은 데이터를 예측 가능하게 하며, 안정성을 높여줍니다.
React에서 props는 ‘속성(properties)’의 줄임말로, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용되는 방식입니다. 상위 컴포넌트는 하위 컴포넌트를 호출할 때, 해당 컴포넌트에 필요한 데이터를 props로 전달합니다. 이 데이터는 키-값 쌍으로 구성되며, 다양한 데이터 타입을 포함할 수 있습니다. 하위 컴포넌트는 props를 받아와 컴포넌트 내부에서 사용합니다. props는 함수 매개변수처럼 컴포넌트 함수의 인자로 전달되며, 컴포넌트 내부에서 props를 참조하여 데이터를 사용합니다.
props 예시 코드입니다.
// 상위 컴포넌트
function ParentComponent() {
return (
<ChildComponent
name="John"
message="Hello from parent!"
/>
);
}
// 하위 컴포넌트
function ChildComponent(props) {
return (
<div>
<h2>{props.name}</h2> {/* props.name === "John" */}
<p>{props.message}</p> {/* props.message === "Hello from parent" */}
</div>
);
}
State는 리액트에서 사용하는 일반 자바스크립트 객체이며 렌더링 결과물에 영향을 주는 데이터를 가지고 있으며 함수 내에서 선언된 state는 각 컴포넌트 안에서 관리합니다.
state는 Onclick 같은 사용자 이벤트 또는 네트워크 상태에 따라 변경될 수 있습니다. 컴포넌트가 마운트 될 때, state의 기본값으로 시작하고 컴포넌트에서 자체적으로 state를 관리하지만 초기 상태를 설정하는 것 말고는 하위 컴포넌트의 state를 변경할 수 있는 권한이 없습니다.
즉, state는 하위 컴포넌트에서 직접 변경하는 것은 권장되지 않고 만약, state 값을 변경해야 한다면 해당 컴포넌트 내부에서 setState()를 사용해야 합니다. state를 자주 쓰면 관리에 더 용이할 것이라고 생각이 들 수 있겠지만, state를 많이 사용하게 되면 복잡성을 증가시키고 관리가 어려워지고 state 업데이트를 처리하는 데 많은 시간이 소요될 수 있기 때문에 상호작용해야 하는 상황이 아니라면 많은 state를 갖는 것을 피해야 합니다.
setState는 state를 업데이트하고 리렌더링하는 데 사용됩니다. setState를 사용해서 state를 업데이트하면 리액트는 변경된 state를 감지하고 렌더링 하여 화면을 다시 그리게 됩니다. 이러한 기능은 동적 데이터를 다루는 데 유용하게 쓰입니다.
setState 메서드는 2가지 형태로 사용됩니다.