[코드숨] 리액트 13기 -2강/ 2. React(useState, 관심사의 분리)

<2강-1 수업내용>

리액트 훅

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

Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState

• Using the State Hook

React는 useState 같은 내장 Hook을 몇 가지 제공함. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능함. 

 

useState를 호출

“state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 아무 이름으로 지어도 됨.

useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.

 

useState() Hook의 인자로 넘겨주는 값은 state의 초기 값.

함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있다.

위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 함)

useState는 state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유. 클래스 컴포넌트의 this.state.count와 this.setState와 유사.

 

---

▼ index.jsx 

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  // useState설정/상태정리
  const [state, setState] = useState({
    count: 0,
  });// useState Hook을 사용

  const { count } = state;

  // setState 설정/상태변화
  function handleClick() {
    console.log('click');
    setState({
      count: count + 1,
    });
  }

  // 그려주기
  return (
    <button type="button" onClick={handleClick}>
      Click me!
      (
      {count}
      )
    </button>
  );
}

function Button({ children }) {
  return (
    <button type="button">
      {children}
    </button>
  );
}// 첫글자는 대문자

function Buttons() {
  return (
    <p>
      {[1, 2, 3].map((i) => (
        <Button key={i}>
          {i}
        </Button>
      ))}
    </p>
  );
}

function App() {
  return (
    <div>
      <p>Hello,world</p>
      <p>Hi</p>
      <Counter />
      <Buttons />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));// ReactDOM을 이용해 그려줌

 

---

<2강-2 수업내용>

 

선언형 프로그래밍

프로그래밍 패러다임 중 하나입니다.

선언형 프로그래밍은 정확하게 어떤 명령 혹은 단계들이 실행될지 묘사하지 않고, 프로그램에서 원하는 것 목표만을 기술합니다. 즉 목표만 있을 뿐 어떻게 목표를 달성하는지 기술하지 않는 것입니다.

선언형 프로그래밍의 예로는 데이터베이스 Query language(SQL), Regular expression, 설정 파일, 함수형 프로그래밍 등이 있습니다.

관심사의 분리

컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결합니다. 각 부문의 관심사를 분리하면 코드를 이해하고 보수 하기 훨씬 더 쉬워집니다. 기존의 웹 개발 방식은 관심사의 분리보단 마크업, 디자인, 로직을 분리하는 기술의 분리에 가까웠습니다. 반면 리액트는 컴포넌트별로 관심사를 분리하여 재사용성과 확장성을 높여서 개발을 더 쉽게 해줍니다.

 

비즈니스 로직: count에서 setSate 변화가 있는것

function handleClick() {   
 setState({      count: count + 1,    }); 
}

 

UI 로직:  보이는것

<button type="button" onClick={onClick}>     
  Click me!      (      {count}      )   
</button>

 

▼ index.jsx 최종 정리 코드

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// 화면에 그려주는 컴포넌트
function Counter({ count, onClick }) {
  return (
    <button type="button" onClick={onClick}>
      Click me!
      (
      {count}
      )
    </button>
  );
}

function Button({ children }) {
  return (
    <button type="button">
      {children}
    </button>
  );
}

function Buttons() {
  return (
    <p>
      {[1, 2, 3].map((i) => (
        <Button key={i}>
          {i}
        </Button>
      ))}
    </p>
  );
}

// 전체 그려주기
function Page({ count, onClick }) {
  return (
    <div>
      <p>Hello,world</p>
      <p>Hi</p>
      <Counter
        count={count}
        onClick={onClick}
      />
      <Buttons />
    </div>
  );
}

function App() {
  // 상태를 관리하는 컴포넌트
  const [state, setState] = useState({
    count: 0,
  });

  const { count } = state;

  function handleClick() {
    setState({
      count: count + 1,
    });
  }
  //

  return (
    <Page
      count={count}
      onClick={handleClick}
    />
  );
}

ReactDOM.render(<App />, document.getElementById('app'));// ReactDOM을 이용해 그려줌

---

Sources

• Node.js 표준 라이브러리 path - https://nodejs.org/docs/latest-v12.x/api/path.html
• 웹팩 - Entry points - https://webpack.js.org/concepts/entry-points/
• React - https://reactjs.org/docs/react-api.html
• ReactDOM - https://reactjs.org/docs/react-dom.html
• Introducing Hooks - https://reactjs.org/docs/hooks-intro.html
• 선언형 프로그래밍 - 위키백과 - https://en.wikipedia.org/wiki/Declarative_programming
• soldonii 블로그 - https://soldonii.tistory.com/100
• 리액트 훅 - https://ko.reactjs.org/docs/hooks-intro.html