State

state : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값(상태의 변화)

useState(State Hook)

useState : React의 state를 다루는 함수

const [state 저장 변수(현재 state 변수), state 갱신 함수(현재 state 변수를 갱신하는 함수)] 
     = useState(상태 초기 값);

useState를 호출하면 배열을 반환하는데 배열 구조 분해 문법으로 첫 번째 요소를 현재 state 변수로 두 번쨰 요소는 첫번째 요소 변수를 갱신해주는 함수로 할당해준다.

Props

props : 외부(상위 컴포넌트)로부터 전달받은 값 / 해당 컴포넌트의 속성 / 함부로 변경할 수 없는 읽기 전용(read-only) 객체 형태 / React의 단방향, 하향식 데이터 흐름 원칙

Props 사용법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링한다.

<Component attribute={value}/> // key={key's value}
=> {attribute:value} 
=> props.attribute

<Component>자식 요소 전달</Component>
=> props.children

React_Event

<button onClick={handleClikEvent}>clickBtn</button>

• React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달

• React에서는 변경될 수 있는 입력값(input, textarea, select)을 일반적으로 컴포넌트의 state 로 관리하고 업데이트 => onChange

• React가 state를 통제할 수 있는 컴포넌트를 Controlled Component

React_dataFlow

• 테스트가 쉽고 확장성이 좋아 상향식(bottom-up)으로 앱을 만든다.

• 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일

• 하나의 컴포넌트는 한가지 일만(단일 책임 원칙에 따른 구분)

• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.

• 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down)임을 의미 => 단방향 데이터 흐름(one-way data flow)

• 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통의 부모 컴포넌트에 상태를 위치

• React 에서 데이터를 다룰 때에는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정