SEB Section 1 State & Props

State

• ‘상태’라는 의미로 변할 수 있는 값이다.
• 컴포너트의 사용 중 컴포너트 내부에서 변할 수 있는 값이다.

state 사용방법

• useState라는 특별한 함수를 제공해서 import 로 불러와야 한다.
• 컴포너트 안에서 useState를 호출한다. useState를 호출하는 것은 state라는 변수를 선언하는 것과 같으며, 변수 이름은 아무거나 지어도 된다. state변수는 React에 의해 함수가 끝나도 사라지지 않는다.
• 현재 state의 변수와 이 변수를 갱신할 수 있는 함수 그리고 state의 초기값이 필요하다.

Props

• 컴포넌트의 속성을 의미한다. 변하지 않는 외부로 부터 전달받은 값 이다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. 컴포너트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
• 객체 형태를 가진다.
• 함부로 변경될 수 없는 읽기전용 객체이다.

props 사용방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.