React (1)

React 소개

• 상태변화를 감지하는 반응형 라이브러리
  반응형으로 상태를 관찰하고 변화가 발생하면 변화와 연관된 곳에서 연산을 수행한다.
• MVC (Model View Controller) 에서 리액트는 View 에만 관여함
  컴포넌트 시스템으로 view 를 관리한다.
• 컴포넌트: 재사용이 가능한 독립적인 객체
  여러 요소를 담을 수 있음 (HTML, Style, JS, Event, State, ...)
  트리구조로 컴포넌트끼리 서로 데이터를 주고받을 수 있음
  조합이 가능함 ... 여러개의 컴포넌트로 어플리케이션을 구성함.
• Virtual DOM
  가상 돔: 코드로 돔 트리를 표현한 것이라 볼 수 있음 ... 필요한 부분만 한 번에 렌더링 (별다른 최적화 없이 빠른 성능을 낼 수 있다. / 가상돔은 성능보다는 개발을 편하게 최적화되어 있음)

---

create-react-app, JSX

create-react-app

• 리액트로 어플리케이션을 만들 수 있는 가장 빠른 방법
• webpack 등을 통한 build 설정을 직접 하지 않아도 됨
  npx create-react-app 만들 프로젝트 이름

JSX

• JavaScript를 확장한 문법 / 가상돔을 정의 ... JS 파일이지만 HTML 문법처럼 보임
• createElement 등을 통해 컴포넌트를 구성하는 방식을 쉽게 만들어줌
• 반드시 최상위 요소가 하나여야 함 (최상위를 <div> / <> </>(프래그먼트) 로 묶는다.)
  프래그먼트 ... 최상위를 의미없는 div 로 묶기 싫을 때
• 표현식, 조건문, 반복문의 사용이 가능
  • 표현식: const name = '이름' ... Hi {name}
  • 조건문: bool 등을 통해 true 일 때만 동작하는 등의 조작이 가능함 (삼항 연산자 사용 가능)
    const showLink = false .... {showLink && { JSX }} ... showLink 가 true 일 때만 && 뒤가 렌더링 됨
  • 반복문: 반복문 사용시, key를 반드시 넣어주여야 함
    const nums = [1, 2, 3] ... { nums.map(item => { <li key={item}>{item}</li> })}

---

컴포넌트

• 컴포넌트는 상태와 이벤트를 담을 수 있다.
  컴포넌트는 트리구조로 이루어져 있어 서로 메시지, 데이터를 주고받을 수 있다.
  데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐름 ... 단방향
• 리액트 컴포넌트는 HTML, 스타일, 로직 등을 담을 수 있다.
• 여러 컴포넌트가 모여 하나의 어플리케이션을 만듦
• 컴포넌트의 재사용성을 활용하는 방법
  UI 를 추상적으로 바라보기 (공통점을 찾는 것이 재사용의 시작)
  데이터를 JSX 로 받는다면 확장성 있게 사용이 가능함
• 도메인으로 분류하기
  회원과 관련된 도메인 컴포넌트
  프레젠테이션과 관련된 도메인 컴포넌트 등...
• 역할로 분류하기
  헤더 컴포넌트
  네비게이션 컴포넌트
  프레젠테이션 리스트 컴포넌트
  태그 컴포넌트 등...
• props 를 통해 컴포넌트 간 데이터를 전달할 수 있으며, 데이터가 전달되지 않을 때의 기본값을 .defaultProps 로 정의해줄 수 있다.
  비구조화 할당을 통해서 전달받은 데이터를 사용할 수 있다.
• props 의 type 를 정의해주기 위해서는 import PropTypes from 'prop-types' 를 통한 .propTypes 로 가능하다
  PropTypes.node.isRequired ... node: jsx 엘리먼트를 받을 수 있는 타입
  

---

상태와 이벤트 바인딩

hook

• useState 와 같은 훅을 이용하여 (지역) 상태를 관리할 수 있다.
• 이벤트 바인딩 ... 실행될 함수를 선언해주고 하위 컴포넌트에서 실행할 수 있다.

useEffect

• 변화가 있을 때 감지하여 반응하는 훅
  useEffect(() => { // 이벤트 }, [감지할 데이터])
• 라이프 사이클처럼 활용할 수도 있다 ... 감지할 데이터 배열에 값을 넣지 않으면 컴포넌트가 처음 로드될 때 한번 실행된다.
  위의 방식으로 전역적으로 이벤트를 잡는 용도로도 사용 가능하다(scroll handle 등) ... 전역 이벤트를 설정하였으면 반드시 해제해줘야 함 (return () => document.removeEventListener)
  useEffect 에서의 return 은 컴포넌트가 제거될 때 사용
  

useRef

• 돔에 직접 접근하고자 할 때 사용하거나, 지역 변수로 사용할 때 사용한다.
• 지역 변수로 사용할 때의 useState 와의 차이점
  useState 는 값이 변경될 때 다시 렌더링을 함
  useRef 는 값이 변경되더라도 다시 렌더링을 하지 않음
• 돔에 직접 접근하고자 할때는 .current 를 통해 직접 접근할 수 있다.
• 컴포넌트를 통한 돔의 접근도 가능하다.
  접근해야 할 하위 컴포넌트에서 React.forWardRef((props, ref) => {...}) 를 통해 접근할 수 있다.
  

---

회고

react 를 처음 배워보는 시간이 되었다. Vue 를 통한 기본 개념을 배워놓은게 많은 도움이 되었던 것 같다.
컴포넌트를 어디까지 쪼개야할까 라는 생각을 정말 많이 했는데, 너무 깊게 생각하지 말라는 조언이 많이 와닿았던 것 같다.