TIL 이미지

리액트의 특징

  1. Reactive Programming
    React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산을 수행한다.

  2. View만을 관리하는 라이브러리

  3. 컴포넌트

    • 재사용이 가능한 독립적인 객체.
    • HTML, Style, JavaScript, Event, State 등을 포함
    • 트리 구조로 구성할 수 있다.

  4. Virtual DOM

    • 필요한 부분만 렌더링한다. 빠른 성능.
    • 그러나 DOM을 조작하는 것보다 항상 빠른 것은 아니다.
      대부분의 경우에서 빠를 뿐이다.
    • 성능보다는 개발을 편리하게 하기 위한 것.
      (성능 최적화를 하지 않아도 괜찮은 성능이 나온다)

어떻게 공부해야할까?

  • 당장 너무 딥하게 공부하지 마라.
  • “Easy to learn, Hard to master”
  • 재사용성과 확장성을 처음부터 생각하는 것은 쉽지 않다.

create-react-app

  • npx, npm, yarn
  • JSX의 html 태그들은 가상 DOM이라고 할 수 있다.
  • JSX가 기존 html과 다른 점
    1. class => className
    2. Return하는 최상위 요소는 1개이어야 한다.
      React.Fragment
    3. 표현식은 {}로 감싼다.
      조건문, 반복문을 사용할 수 있다.
      반복문을 사용할 때는 반드시 key를 명시해야 한다.

컴포넌트 이론

  • 데이터는 상위에서 하위로 흐른다. 단방향.
  • UI를 추상적으로 바라보기
    공통점을 찾는 것이 추상성과 재사용의 시작이다.
    지나치게 추상화하지 않는 것도 중요하다.
  • 도메인, 역할, 크기 등으로 분류하기
  • React의 컴포넌트는 함수이다.
    Props를 입력받아서 JSX를 출력한다.

컴포넌트 실습

  • props 데이터가 문자열이면 ""로 감싸고, 문자열이 아니면 {}로 감싼다.
  • props 데이터의 default 값을 선언할 수 있다.
    defaultProps, 전달 인자

  • props 데이터의 Type을 선언할 수 있다.
    propTypes, PropTypes

    PropTypes.node.isRequired

  • props.children
    A 컴포넌트 사이에 B 컴포넌트가 있을 때,
    A 컴포넌트에서 B 컴포넌트 내용을 조회할 때 사용한다.

분기와 반복

  • if, for와 같은 문법은 잘 사용하지 않고 삼항연산자와 map, filter 등을 사용한다.

  • jsx의 {}에서는 표현식만 작성할 수 있다. 선언문은 작성할 수 없다.

상태와 이벤트 바인딩

  • PropTypes.func
  • 이벤트 버스

useEffect

  • 무언가 변화가 있을 때 감지하여 반응하는 Hook
  • useEffect(콜백 함수, 배열)
    콜백 함수: 반응, 배열: 감지 대상
  • 아무것도 감지하지 않을 경우(빈 배열일 경우) 컴포넌트가 처음 로드될 때 한 번 실행.
    API 호출, 전역 이벤트 바인딩 등
  • 콜백함수 리턴
    컴포넌트가 제거될 때 발생한다.
    전역 이벤트를 바인딩한 경우 삭제해야 한다.

useRef

  1. DOM에 직접 접근할 때 사용한다.
    (리액트는 DOM으로의 직접 접근을 허용하지 않는다)
  2. 지역 변수로 사용할 때 사용한다.

  • useState는 값이 변경될 때 다시 렌더링을 한다.
    useRef는 값이 변경되더라도 다시 렌더링을 하지 않는다.

  • inputRef.current

  • 상위 컴포넌트에서 하위 컴포넌트로 Ref 요소를 전달할 수 있다.
    React.forwardRef를 사용한다.

  • let이 아닌 useRef를 사용하는 이유
    let을 사용해 변수를 선언하면 함수가 다시 불려질때마다 초기화된다.
    반면에 useRef는 값이 유지된다.

참고자료

데브코스 49일차 강의