[React] state, prop

React의 대표적인 특징

1. 단방향(하향식) 데이터 흐름 원칙(One-way data flow)

React is all about one-way data flow down the component hierarchy

 

2. 상향식(bottom-up)으로 앱을 만듦

페이지를 만들기 전에 컴포넌트를 먼저 만들고 조립

-> 테스트가 쉽고 확장성이 좋음

 

3. 단일 책임 원칙

하나의 컴포넌트는 하나의 일만 함

 

State(상태)

컴포넌트 내부에서 변할 수 있는 값

변화가 필요한 데이터를 state로 저장하여 사용

상위 컴포넌트의 state를 하위 컴포넌트에 props으로 전달

 

Props(속성)

컴포넌트 외부로부터 전달받은 변하지 않는 값

컴포넌트가 최초 렌더링될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용

React 컴포넌트는 자바스크립트 함수와 클래스이며, props를 전달인자로 받아 이를 React 엘리먼트로 반환

변경될 수 없는 읽기 전용(read-only) 객체 형태

(props를 수정할 수 있는 경우 props를 전달한 상위 컴포넌트에 영향을 미치게 되며 이것은 side effect 부수효과를 불러옴.

단방향 데이터 흐름 원칙 위배)

 

Props 사용 방법

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

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

3. 하위 컴포넌트는 전달받은 props를 렌더링

// 속성, 값으로 정의하기. props.attribute로 접근
function Parent() {
  return {
    <div className="parent">
      <Child attribute={value} /> // 예시 value={"Hi, everyone"}
    </div>
  )
}

// 여는 태그, 닫는 태그 사이에 넣어 정의하기. props.children으로 접근
function Parent() {
  return {
    <div className="parent">
      <Child>Hi, everyone</Child>
    </div>
  )
}

function Child(props) {
  return {
    <div className="child">
      <p>{props.attribute}</p> // 태그 사이에 넣어 전달한 경우 props.children
    </div>
  )
}

 

 

Hook

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수

class 없이 React를 사용할 수 있게 해줌, class에서는 동작하지 않음

 

Hook 존재 전에는 클래스 컴포넌트만 state를 다룰 수 있었으나

Hook이 나오면서 함수 컴포넌트로도 state를 다룰 수 있게 됨

 

useState

: Hook, 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 함수가 끝나도 사라지지 않음

useState 호출은 state 변수 선언과 같음

const [state, setState] = useState(상태초기값)
// state 저장 변수, 갱신 변수

React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링됨

state를 변경하려면 상태 변경 함수(setState) 호출로 변경해야함

(state = true와 같이 강제로 변경을 시도하면 리렌더링이 되지 않거나, state가 제대로 변경되지 않음)

 

상태의 개수는 최소화하는 것이 좋음

그렇지 않으면 애플리케이션이 복잡해짐

 

아래 조건에 해당하면 state가 아님

- 부모로부터 props를 통해 전달되지 않고

- 시간이 지나도 변하지 않고

- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하지 않으면 

 

 

HTML과  React의 이벤트 처리 차이

React는 이벤트명을 camelCase로 사용, 함수를 문자열이 아닌 {중괄호}로 전달(JSX 문법)

// HTML DOM
<button onclick="handleEvent()">Event</button>

// React
<button onClick={handleEvent}>Event</button>

이벤트 예시

- onChange

일반적으로 변경될 수 있는 입력값(input, textarea, select 등 form 엘리먼트)을 컴포넌트의 state로 관리, 업데이트

- onClick

button, a처럼 사용자의 클릭에 따라 애플리케이션이 반응해야할 때 사용

 

 

작업 순서

1. 디자인을 받으면 가장 먼저 이를 컴포넌트 계층 구조(트리)로 만들어야 함

2. 데이터를 어디에 둘지 결정

state 위치

: 데이터를 다룰 때 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터 흐름을 고려하여 위치를 설정해야함

- 특정 컴포넌트에만 유의미하다면 특정 컴포넌트에 위치

- 여러 컴포넌트가 영향을 받는다면 공통 소유(부모) 컴포넌트에 위치

 

 

 

 

22.11.29

코스 S2U6