React : State, Props, Event

📕 Hook 이란?

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리라고 할 수 있다.

📕 Hook의 특징

• 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
• 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로
  서로의 장점을 전부다 가지고 있다
• 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이, 일부의 컴포넌트들안에서 Hook을 사용할 수 있다. 하지만 당장 Hook이 필요하지 않다면 사용하지 않아도 된다.
• 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다.
• Hook은 알고 있는 React 컨셉을 대체하지 않음 : 대신, Hook은 prop, state, context, refs, lifecycle과 같은 React 개념에 좀 더 직관적인 API를 제공한다.
• Hook을 통해서 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 또, 이러한 로직의 추적을 쉽게 할 수 있도록 Reducer를 활용하여 컴포넌트의 지역상태 값을 관리하도록 할 수 있다.

📌 React : Hooks

함수형 컴포넌트에서 Hook의 사용

• 화살표 함수

  const Test = (props) => {
  //이 자리에 Hook을 사용할 수 있다.
  return <div />;
  }

• 일반 함수

  function Test(props){
  //이 자리에 Hook을 사용할 수 있다.
  return <div />
  }

👉 함수형 컴포넌트는 State가 없는 컴포넌트지만, Hook이 State를 함수 안에서 사용할 수 있도록 해준다.
👉 Hook은 Class 안에서는 사용할 수 없다.

📕 State란?

state를 직역하면 상태를 의미하는데, 그 뜻 그대로 컴포넌트의 UI정보를 말한다. state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있다.

📌 State : Function component

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>What is State?</h1>
    </div>
  );
}

export default State;

• 함수 컴포넌트에서 화면에 나타내고 싶은 JSX요소가 return문 안에 들어있는 것을 알 수 있으며,
  state를 설정할 때는 화면에서 보여지듯이 useState함수를 import한 후에 사용해야한다.
• useState 함수는 컴포넌트 선언문 function State()과 return사이에 작성한다.
  useState함수에 초기값 ('red')을 인자로 넣어 호출하면 배열을 반환한다. 배열의 첫번째 요소는 상태값이 저장되는 변수이고, 두번째 요소는 상태 값을 갱신하는 함수로, state를 담는 변수를 color로 지정하고 color값을 갱신하는 함수를 setColor로 그리고 color의 초기 값을 red로 정의한다.

👩‍🏫 State 사용예시

state에서 상태값을 설정하는 이뉴는 결국 컴포넌트 안의 요소에서 그 상태 값을 반영해서 데이터가 바뀔 때 마다 효율적으로 화면에 나타내기 위함이다.

<h1 style={{ color: color }}>Function Component | State</h1>

// key값 color는 색상을 부여하기 위한 속성
// value 값 color는 useState 함수를 통해 초기값인 'red'를 담고 있는 변수

return문안에 h1타이틀 요소가 있는데, 해당요소의 글자색을 컴포넌트에서 설정한 state값으로 하고 싶은 경우, 위의 코드와 같이 state를 담는 변수, color라는 변수를 color 속성의 value로 지정해 준다.

👩‍🏫 Event & state 변경

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1 style={{ color: color }}>Function Component | State</h1>
      <button onClick={() => setColor('blue')}>Click</button>
    </div>
  );
}

export default State;

📌 useState

📁 State()

import React, { useState } from 'react';

function Test(){
  const [age, setAge] = useState(50);
  const [fruit, setFruit] = useState('apple');
  const [todos, setTodos] = useState({text: 'How to use Hooks'});
}

📁 React.Component

class Test extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      age : 50,
      fruit : 'apple',
      todos : {text: 'How to use Hooks'},
    }
  }
}

두 개의 코드는 동일한 코드라고 볼 수 있다. 두 코드 모두 state안에 age, fruit, todos라는 변수가 생겼다. 다른 점은 state를 바꾸는 함수이며, 기존 코드같은 경우는 this.setState() 를 통해서 바꿔주었지만 useState()같은 경우는 setState()의 이름을 변경할 수 있다.

😃 useState()

const [state명, setState명] = useState(초기값)

React.Component state 안에 변수가 여러개 있을 때 this.setState에 들어가서 this.state.age 이런식으로 접근을 해야하는데 useState를 사용하면 변수당 하나의 setState가 있기 때문에 훨씬 편하게 접근이 가능하다.

📍 Class Component

<button onClick={() => this.setState({count: this.state.count + 1})}>
  Click me
</button>

📍 Function Component

<button onClick={()=> this.setCount(count + 1)}>
  Click me 
</button>

-> class는 state값이 많으면 많을 수록 복잡하고 헷깔릴 수 있는데, fuction은 변수마다 함수가 지정되어 있어서 편하게 사용할 수 있다.

📕 useEffect

😃 React Component에 componentDidMount와 componentDidUpdate와 동일한 동작을 한다. 하지만 ReactComponent에서는 Side Effect 함수형 컴포넌트 안에서는 허용되지 않는다.
Side Effect : 데이터를 받거나, 구독하기, DOM을 직접 조작해주는 행위
useEffect Hook에 함수를 전달하여 렌더링 완료 후, 수행 될 수 있도록 한다.
componentDidMount와 componentDidUpdate와는 다르게 useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 베치와 렌더링을 완료한 후 실행된다.