[React] 3. 상태 (State) [Props와 이어집니다.]

리액트는 대부분 use 로 시작하는데 그 중에서 useState 는 상태를 의미하며 

컴포넌트에서 "동적"인 데이터를 관리하는 기능입니다. 

 

즉 컴포넌트의 상태가 바뀌면 리렌더링이 발생합니다 (새로고침)

그렇기 때문에 남발하게 되면 안됩니다.. 

 

선언 자체도 스프링에서 데이터 업데이트하는 것과 비슷합니다.

const [???, set???] = useState(); 이런 구조로 많이 되어 있습니다.

 

 

앞에서 말한 예시에서 setState 를 사용하지 않고 오로지 props 를 사용하게 되면 

변경이 안 되기 때문에 들고 있는 값을 그대로 가져옵니다 ( 버튼 같은 경우 계속 초기값을 가짐 )

하지만 state는 입력 받은 값 을 const[count, setcount] = useState();  기준으로 

count 에 담고 추가적으로 적은 코드를 통해 setcount 부분에 업데이트 된 값을 담아 전달합니다. 

 

Props 의 경우 오로지 부모 -> 자식의 데이터 전송이 목적이라면 

 

State 경우 컴포넌트 내부에서의 동적인 데이터에 대해 관리하는 방식입니다.

'JavaScript > React' 카테고리의 다른 글

[React] 6. 리액트의 생명주기(Life cycle)  (0) 2025.02.14
[React] 5. Hook  (1) 2025.02.14
[React] 4. useRef  (0) 2025.02.13
[React] 2. 속성 (Props)  (0) 2025.02.12
[React] 0. 세팅  (3) 2025.02.07