React state, props

state와 props의 차이점은 무엇인가요?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

state, useState

1. state 란? - 컴포넌트가 관리하는 속성값

• 속성값이 변하면 컴포넌트가 알아서 ui를 업데이트 해줌.

2. useState 란?

• setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.

useState 사용법

1) react에서 useState 기능 import 시키기

	- import {useState} from "react";

2) useState 선언? 해주기

	- const [변수명, set어쩌고(state를 변경해주는 함수)] = useState('초기값');

Props

• 이 값은 속성(state)을 넘겨주는 컴포넌트에서만 관리 가능

• 변경하고 싶다면 받은 컴포넌트 내부에서 useState로 따로 저장해서 관리 해야함.

사용법

1. 속성값을 보낼 컴포넌트에서 전달할 컴포넌트에 속성명 = {속성값}으로 보냄.

2. 전달받을 컴포넌트 함수에서 괄호()에 매개변수명 써줌. *({}) 꼭 이렇게 써줘야 함.

3. 전달받은 속성값을 적용해줄 곳에서 data 넘겨 받은 것처럼 써줌.

Source: https://ko.reactjs.org/docs/faq-state.html