Frontend 개발자 - hyo.loui
React Props, State 이해 본문
❤️🔥TIL : Today I Learned
props, state
리액트(React)에서 props와 state는 둘 다 컴포넌트(Component)에서 데이터를 다루는 데 사용되는 중요한 요소입니다. 그러나 이 둘은 약간의 차이점이 있습니다.
Props 란?
- props는 컴포넌트에서 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 읽기 전용(Read-only)이며, 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 변경할 수 없습니다.
+ ESLint
State 란?
- state는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트가 렌더링될 때 생성되며, 컴포넌트의 생명주기(Lifecycle) 동안 변경될 수 있습니다. state는 변경 가능하며, setState 메소드를 사용하여 업데이트할 수 있습니다. state가 변경되면, 리액트는 컴포넌트를 다시 렌더링하여 변경 사항을 반영합니다.
state 데이터의 변경이 필요할 때 setState를 사용해 함께 리렌더링하는 용도로 사용합니다.
props와 state의 차이점은 무엇인가요?
props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
- 가장 큰 차이는 prop는 부모 component에서 전달되는 것이고, state는 해당 컴포넌트 안에서 관리됩니다.
참조 : https://ko.reactjs.org/docs/faq-state.html
컴포넌트 State – React
A JavaScript library for building user interfaces
ko.reactjs.org
최종 정리
- prop는 부모 component에서 데이터를 전달(함수 매개변수 처럼)하는 데 사용
- state는 컴포넌트 내부에서 관리되는 데이터이며, setState 메서드를 활용해 해당 데이터가 변동이 생기면 리렌더링 됩니다.
'React.js' 카테고리의 다른 글
| Redux 상태관리의 주요 개념과 Recoil (0) | 2023.04.06 |
|---|---|
| 리액트 - useRef (0) | 2023.04.04 |
| 원티드 프리온보딩 프론트엔드 챌린지 4월 사전과제 (0) | 2023.03.29 |
| helprogrammers 프로젝트 - useRef(리액트 훅) (0) | 2022.12.27 |
| 리액트 - useState 남발 금지 (0) | 2022.12.24 |
