Section2-Unit6 [React State & Props]

Props

: 외부로부터 전달받은 변하지 않는 값, 컴포넌트의 속성

• 부모 컴포넌트로부터 전달 받음
• 객체의 형식
• Porps는 읽기 전용 객체
• 구조할당을 활용해 데이터를 사용하면 간단한 코드 작성 가능

States

: 컴포너트 내에서 변할 수 있는 값(개수, 무게, 체크박스..), 즉 상태에 해당하는 값은 React state로 다루어야 함

• useState라는 함수를 사용해 활용
• 구조분해 할당을 사용해 상태 값을 가지는 변수와 상태값을 변화시키는 함수를 담은 변수를 생성
• useState를 사용할 때 인자로 넣어주는 값이 state의 초기값
• 상태 변경 함수를 통해 state 값을 변화시켜주지 않고 강제 변경을 시도하면 제대로 변경되지 않음

이벤트 at React

• DOM의 이벤트 처리 방식과 유사
• 카멜 케이스를 사용해 표기
• 이벤트 핸들러(함수)를 전달
• 이벤트 종류 예시 (onChange, onClick, onKeyUp...등)

React 데이터 흐름

• 데이터의 전달(porps)은 부모에서 자식으로, 즉 하향식으로 전달 됨

• 이를 one-way dataflow(단방향 데이터 흐름) 이라고 하고 대표적인 특징

• state 조건

  • 부모로부터 props를 통해 전달 되지 않아야함
  • 시간이 지나면 변화해야함
  • 컴포넌트 안의 state, props을 활용해 생성한 값이 아니여야 함

• state 위치

  -두 개이상의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 함