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

2020. 6. 13. 19:46Javascript/React

  • 리액트 훅; 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

코드숨 리액트 간단한 카운터앱 만들고 파일 분리하기. Contribute to Joylish/week2-assignment-1 development by creating an account on GitHub.

github.com

 

참고자료

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

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