[React] 리액트 함수형 컴포넌트 세미나

TimetoDev(https://timetodev.co.kr/event/23)의 '리액트 함수형 컴포넌트' 세미나를 듣고 정리한 내용입니다.

세미나는 약 두 시간 정도 진행되었고, 리액트가 처음인 개발자를 대상으로 진행하다보니 함수형 컴포넌트보다 리액트 기초에 관한 내용이 더 비중이 컸다.
나는 리액트 초보라서 굉장히 도움이 많이 되는 내용들이었다.
(함수형 컴포넌트에 대해서는 추가로 세미나 진행할 예정이라고 하심)

발표 내용을 전부 기록한 건 아니고 개인적으로 필요한 부분들만 정리했다.

리액트

자바스크립트 프론트엔드 프레임워크 중에서는 압도적인 점유율을 가지고 있다.
앵귤러는 러닝커브가 너무 길어서 하향세/뷰는 러닝커브가 짧은 편

리액트 주요특징

• 컴포넌트 기반

• JSX 문법 사용

• Virtual DOM : HTML DOM의 특정요소만 바뀌어도 전체 DOM을 다시 렌더링하는 DOM의 단점 보완
  -> DOM 내의 변경된 부분만 DOM에 적용하는 기술 제공(부분렌더링으로 성능 향상)

• 리액트 개발 런타임 환경 : node.js
  
  

npm 명령어

• npm i 패키지명 : 해당 프로젝트에서만 설치
• npm i -g 패키지명 : 전역설치

여러 프로젝트에서 공통적으로 / 반복적으로 쓰는 패키지는 전역설치하면 편함

NVM (Node Version Manager)

• 하나의 컴퓨터에 여러 개 버전의 node를 설치할 수 있다.
• NVM은 어떤 node 버전에서 프로젝트를 개발할지 선택/관리할 수 있게 해주는 도구.
• 리액트 개발할 땐 거의 필수

nvm 명령어

• nvm ls : 설치되어있는 노드 버전을 전부 보여줌
• nvm use 버전명 : 사용할 버전 설정
• nvm install 버전명
• nvm uninstall 버전명
  
  

yarn

• npm의 단점/한계(보안 문제, 패키지 설치, 복원 속도 등)를 보완한 최신 패키지 매니저

• 리액트 개발할 때는 yam 패키지 관리자 사용을 권장함(npm은 거의 사용하지 않음)

yarn 명령어

• yarn init : package.json 생성 & 프로젝트 초기화
• yarn / yarn install : 패키지 복원(package.json에 명시된 노드 패키지들을 설치해준다)
• yarn add 패키지(@특정버전) : 패키지 설치(특정버전 설치)
• yarn upgrade 패키지 : 특정 패키지 업데이트
• yarn remove 패키지 : 특정 패키지 삭제
• yarn global add create-react-app : 리액트 프로젝트 generater, 프로젝트 템플릿(기본적인 프로젝트 구조를 잡아줌)
• yarn start : 프로젝트 실행
• yarn build : single page application 이 만들어짐. 소스 빌드한 최종 산출물 생성(웹서버나 클라우드 스토리지에 올려두면 하나의 프론트엔드 애플리케이션이 브라우저를 통해 실행될 수 있음.)
  / 내부적으로는 웹팩(번들러)를 통해서 기존의 js, css 파일들이 하나의 js파일, 하나의 css파일로 모아주는 작업이 이루어진다.

• yarn 명령어는 반드시 프로젝트 폴더 안에서 수행시켜야함
  
  

리액트 개발에 필요한 확장툴

1. Reactjs code snippets
   단축키로 컴포넌트 구조 제공(코드 블럭 생성해줌)
   rcc, rsc 등의 명령어가 있음

2. Prettier
   코드 포맷터. 코딩 컨벤션을 설정해두면 저장할 때 자동으로 코드 정렬이 됨 (협업 시 통일된 코딩 컨벤션을 위해 필수)

코드 포맷터 설정하기

• 코드 포맷터는 신택스를 잘못 작성했을 때 자동으로 바로 잡아준다.
• Visual Studio Code에서 Prettier 확장 프로그램 설치 -> 프로젝트 루트에 .prettierrc 파일 작성 -> Visual Studio Code setting에서 format on save 체크하기
  
  

리액트 어플리케이션 구조

Package.json

• Dependencies : 꼭 설치되어야하는 라이브러리 리스트
  (Dependencies를 기준으로 node_modules가 구성됨)

• yarn.lock : 패키지 간 의존성 정보 관리(패키지 의존성 이슈가 발생하면 yarn.lock을 통해서 확인해보고 해결할 수 있음. 직접 수정은 X)

public 디렉토리

• 정적인 자료들 저장(html, 이미지 등)
• 리액트 어플리케이션은 SPA이므로
  html파일이 기본적으로 하나만 존재함.
  public에 있는 index.html이 유일한 웹페이지 역할을 한다.
  *SPA : 화면 새로고침이 없음. 하나의 페이지 안에서 비동기적 처리로 사용성 개선

index.html > body > div#root > App.js

src 디렉토리

• 컴포넌트(js), css 파일을 두는 곳

함수형컴포넌트

App.js

function App() {
 return ( //jsx문법
  <div className="App-header">
   //...
  </div>
 );
}

• JSX 코드는 빌드 후 자바스크립트 코드가 됨.

index.js

• 리액트 프로젝트가 처음 시작되는 진입점

• 프로젝트 실행 후 일어나는 일 :
  yarn start -> index.js -> App.js(최상위컴포넌트) -> 하위 컴포넌트 호출됨(개발자가 개발한 UI 컴포넌트 호출) -> index.html에 렌더링됨

ReactDom.render(<..>, document.getElementById('root'));
// index.html의 div#root 태그에 리액트 컴포넌트(App)를 삽입해준다. 

yarn build

• 프로그램을 배포하려면 빌드를 해야함.

• 웹팩이라는 번들러를 통해 html, 자바스크립트 등 브라우저에서 읽을 수 있는 정적인 소스로 전부 변환이 됨. (리액트 SPA 기반으로 개발된 소스는 빌드를 하지 않으면 브라우저에서 인식을 못함)

• yarn build를 하면 build 폴더가 생성되고 그 안에 배포용 소스파일들이 만들어짐
  
  

JSX 구조 이해와 JSX 문법

• JSX : Javascript XML

• 자바스크립트에 XML 문법을 추가한 자바스크립트 확장 언어

• html과 같은 마크업 언어이다.

• html과 비슷한 모습이지만 html이 아니기 때문에 html처럼 작성하면 안 된다. xml 기반이기 때문에 닫는 태그가 반드시 필요함.
  ex) class 속성 대신 className 속성 사용

• 최상위 태그는 하나로 구성해야함.
  (최상위에 두 개의 수평한 태그로 구성하고 싶으면 Fragment 태그로 감싸주기)

• JSX내에 자바스크립트를 입력하려면 { } 블록 안에 코딩한다.

• 코드 블럭 안에서 삼항연산자 사용 가능

• jsx 내에서 인라인스타일 적용 가능
  (태그 안에 style 속성 직접 추가해서 스타일을 적용하는 방식)

• jsx에서는 카멜표기법 사용해야함. - 사용 X. (ex: backgroundColor)

• 인라인으로 바로 스타일을 적용할 때는 중괄호 두개를 {{ }} 써야함