React - State & Props

1. State 의 정의

1. 살면서 변할 수 있는 값 State( 상태 )
2. 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

-----------------------------------------------------------------------------------

2. Props 와 State 의 차이

1. props 는 외부로부터 전달받은 값
2. state 는 내부에서 변화하는 값

-----------------------------------------------------------------------------------

3. Props 의 특징

1. 컴포넌트의 속성을 의미한다
2. 상위 컴포넌트로부터 전달받은 값이다
3. 객체 형태이다
4. props 는 읽기 전용이다

-----------------------------------------------------------------------------------

4. Props 사용하는 방법

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

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I`m the eldest child"} />
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
     <p>{props.text}</p>
    </div>
  );
};

// <Parent> <Child> 컴포넌트 선언

 4. props 를 전달하는 또 다른 방법으로 여는 태그와 닫은 태그의 사이에 value 를 넣어 전달할 수 있다. 이 경우 props.children 을 이용하면 해당 value 에 접근하여 사용할 수 있다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

-----------------------------------------------------------------------------------

5. State

1. React 에서는 state 를 다루는 방법중 하나로 useState 라는 함수를 제공한다
2. useState 함수를 컴포넌트 안에서 호출해 준다. useState 를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같고, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React 에 의해 함수가 끝나도 사리지지 않는다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
};

    3. useState 를 호출하면 배열을 반환하는데, 배열의 첫 번째 요소는 현재 state 변수이고, 두 번째 요소는 이 변수를 갱신할 수          있는 함수이다. useState 의 인자로 넘겨주는 값은 state 의 초기값이다.

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

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초기 값);
};

-----------------------------------------------------------------------------------

6. 이벤트 처리 Hands - on

• React 의 이벤트 처리 방식은 DOM 의 이벤트 처리 방식과 유사하다. 단, 몇 가지 문법 차이가 있다.

1. React 에서 이벤트는 소문자 대신 카멜 케이스( camelCase )를 사용한다.
2. JSX 를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다.

// HTML 이벤트 처리 방식
<button onclick="handEvent()">Event</button>

// React 이벤트 처리 방식 
<button onClick={handEvent}>Event</button>

-----------------------------------------------------------------------------------

7. React 데이터 흐름

1. React 의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위가 시작한다는 점이다.
2. 컴포넌트는 컴포넌트 바깥에서 props 를 이용해 데이터를 마치 인자 혹은 속성처럼 전달받은 수 있다.
3. 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식( top-down )임을 의미한다.
4. 이 원칙을 중요하다. 단방향 데이터 흐름( one-way data flow )이라는 키워드가 React 를 대표하는 설명 중 하나일 정도이다.

** 모든 데이터를 state 로 둘 필요는 없고, state 는 최소하하는 것이 가장 좋다. 어떤 데이터를 state 로 둘지는 3 가지 질문을 통해 판단해보자.

1. 부모로부터 props 를 통해 전달되는가?
2. 시간이 지나도 변하지 않는가?
3. 컴포넌트안의 다른 state 나 props 를 가지고 계산이 가능한가?

** 위 조건들이 충족된다면 state 가 아니다.