2주차 리액트로 간단한 카운터앱 만들기 회고

• 리액트 훅; useState

Hook는 Class없이 React 기능들을 사용하는 방법을 알려줍니다.개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook는 React의 정신을 희생하지 않고 함수를 받아들입니다. Hook는 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다.

• 선언형 프로그래밍

• 관심사의 분리 → 컴포넌트 분리(상태관리 컴포넌트, UI 컴포넌트, ...)

1) 컴포넌트에 대한 뛰어난 의사 결정
컴포넌트를 얼마나 작은 단위로 쪼갤 것인지, 어떻게 재사용 가능한 컴포넌트를 만들 것인지 아는 개발자.

*2) state가 존재하는 위치에 대한 의사 결정
*state는 가상 DOM 내에 여러 곳에 존재할 수 있는데, 이를 어디에 위치시킬지 아는 개발자.

*3) state가 변경될 때, 컴포넌트에 어떤 변화를 줄 것인지에 대한 의사 결정
*state가 변경되었을 때, 어떤 부분이 re-rendering 되어야 하는지 아는 개발자.

 

• 리액트 관련 라이브러리와 컴포넌트 파일 import 시 구분하기

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  import App from './App';

• props 이해

  부모 컴포넌트 Buttons가 자식 컴포넌트 Button에게 props를 넘겨줄 때,

  • 자식 컴포넌트가 사용하는 props 이름
  • children은 무엇인가

  function Button({ children, onClick }) {
    return (
      <button type="button" onClick={onClick}>
        {children}
      </button>
    );
  }
  
  function Buttons({ handleClick }) {
    return [1, 2, 3, 4, 5].map((i) => (
  
      <Button key={i} onClick={() => handleClick(i)}>
      // ★ 여기에 있는 값이 컴포넌트 Button의 children으로 들어간다.
        {i}
      //
      </Button>
    ));
  }
  
  

 

전체코드

https://github.com/Joylish/week2-assignment-1

Joylish/week2-assignment-1

 

참고자료

Hook의 개요 (https://ko.reactjs.org/docs/hooks-overview.html)

리액트의 탄생배경과 핵심 개념 (https://soldonii.tistory.com/100)