728x90
반응형
상태(State)
정의와 개념
- 상태(State)는 컴포넌트 내에서 관리되는 데이터입니다. 각각의 컴포넌트는 자체적인 상태를 가질 수 있으며, 이 상태는 컴포넌트의 생명주기 동안 변경될 수 있습니다.
- 함수형 컴포넌트에서는 useState 훅을 통해, 클래스형 컴포넌트에서는 클래스의 state 속성을 통해 관리됩니다.
상태 관리의 필요성
- 상태는 UI의 동적인 변화를 표현하고, 사용자 상호작용에 따라 데이터를 저장하고 업데이트하는 데 사용됩니다.
- 예를 들어, 사용자 입력 값, 네트워크 요청 결과, 애니메이션 상태 등을 관리할 수 있습니다.
상태 업데이트 방법
- 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 선언하고, setState 함수를 통해 상태를 업데이트합니다.
- 클래스형 컴포넌트에서는 this.state 객체를 직접 수정하지 않고 setState 메소드를 사용하여 상태를 변경합니다.
- 상태가 변경될 때 컴포넌트가 자동으로 리렌더링되어 UI가 업데이트됩니다.
속성(Props)
정의와 개념
- 속성(Props)은 React 컴포넌트에서 전달되는 매개변수입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.
- 속성은 컴포넌트 내부에서 읽기 전용으로 사용되며, 변경할 수 없습니다.
속성 사용의 필요성
- 컴포넌트 간 데이터 전달을 통해 재사용성을 높이고, 구조를 모듈화하여 관리할 수 있습니다.
- 동적으로 데이터를 전달하므로 다양한 상황에 유연하게 대응할 수 있습니다.
childen 속성
- 리액트에서는 컴포넌트의 태그 사이에 위치한 요소들이 children props로 전달됩니다.
- 이를 활용하여 부모 컴포넌트에서 자식 요소들을 포함하고 조작할 수 있습니다.
함수형 children
- JSX에서 중괄호를 통해 자바스크립트 코드를 넣는 방식으로, children을 함수형으로 설정하여 전달할 수 있습니다.
728x90
반응형
'카카오테크 부트캠프' 카테고리의 다른 글
| [카카오테크 부트캠프] React 생명주기 (0) | 2024.11.28 |
|---|---|
| [카카오테크 부트캠프] React에서 이벤트 처리하기 (0) | 2024.11.28 |
| [카카오테크 부트캠프] React 컴포넌트 (0) | 2024.11.28 |
| [카카오테크 부트캠프] React 소개 (0) | 2024.11.27 |
| [카카오테크 부트캠프] 7일차 회고 (0) | 2024.11.24 |