[카카오테크 부트캠프] 상태(State)와 속성(Props)

상태(State)

정의와 개념

• 상태(State)는 컴포넌트 내에서 관리되는 데이터입니다. 각각의 컴포넌트는 자체적인 상태를 가질 수 있으며, 이 상태는 컴포넌트의 생명주기 동안 변경될 수 있습니다.
• 함수형 컴포넌트에서는 useState 훅을 통해, 클래스형 컴포넌트에서는 클래스의 state 속성을 통해 관리됩니다.

상태 관리의 필요성

• 상태는 UI의 동적인 변화를 표현하고, 사용자 상호작용에 따라 데이터를 저장하고 업데이트하는 데 사용됩니다.
• 예를 들어, 사용자 입력 값, 네트워크 요청 결과, 애니메이션 상태 등을 관리할 수 있습니다.

상태 업데이트 방법

• 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 선언하고, setState 함수를 통해 상태를 업데이트합니다.
• 클래스형 컴포넌트에서는 this.state 객체를 직접 수정하지 않고 setState 메소드를 사용하여 상태를 변경합니다.
• 상태가 변경될 때 컴포넌트가 자동으로 리렌더링되어 UI가 업데이트됩니다.

속성(Props)

정의와 개념

• 속성(Props)은 React 컴포넌트에서 전달되는 매개변수입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.
• 속성은 컴포넌트 내부에서 읽기 전용으로 사용되며, 변경할 수 없습니다.

속성 사용의 필요성

• 컴포넌트 간 데이터 전달을 통해 재사용성을 높이고, 구조를 모듈화하여 관리할 수 있습니다.
• 동적으로 데이터를 전달하므로 다양한 상황에 유연하게 대응할 수 있습니다.

childen 속성

• 리액트에서는 컴포넌트의 태그 사이에 위치한 요소들이 children props로 전달됩니다.
• 이를 활용하여 부모 컴포넌트에서 자식 요소들을 포함하고 조작할 수 있습니다.

함수형 children

• JSX에서 중괄호를 통해 자바스크립트 코드를 넣는 방식으로, children을 함수형으로 설정하여 전달할 수 있습니다.