TIL 16. React CRA, 컴포넌트

Mission. CRA, 컴포넌트 활용하기

1) 목적

1. 기초 문법을 숙지하여 리액트 컴포넌트 안에서 JS를 사용하기 위함
2. 컴포넌트 개념을 숙지하여 컴포넌트를 생성하기 위함

2) 방법

1. react 기본 문법 학습
2. 개발 환경 설정
3. 컴포넌트 개념 학습

3) 문제

yarn 설치를 위해 npm install -g yarn 을 입력 했는데 다음과 같은 오류가 나타났다.

npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/yarn
npm ERR! dest /usr/local/lib/node_modules/.yarn-Jrexx8nI
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/yarn' -> '/usr/local/lib/node_modules/.yarn-Jrexx8nI'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/yarn' -> '/usr/local/lib/node_modules/.yarn-Jrexx8nI'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/local/lib/node_modules/yarn',
npm ERR!   dest: '/usr/local/lib/node_modules/.yarn-Jrexx8nI'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nana/.npm/_logs/2023-06-12T11_29_13_239Z-debug-0.log
'''

4) 시도

권한 문제 해결을 위해 명령어 sudo npm install -g yarn, 패스워드를 입력하면 설치된다.

5) 알게된 점

UX : 사용자 경험
UI : 사용자 인터페이스(사람과 컴퓨터 간의 상호작용)
SPA : Single Page Application
MPA : Multi Page Application

Const, let은 block level scope를 가진다. (중괄호에 있는 값만 유효)

얕은복사: 객체1을 객체2에 복사한 다음 객체2를 바꿀 때 객체1도 같이 바꿔지는 현상

Template Literals :
1. console.log에 백틱 안에 placeholder(${})를 통해 변수넣기
2. 변수 값에 백틱을 이용해 멀티라인(문자열 줄바꿈 그대로 출력) 가능

구조분해할당 : 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당됨

전개연산자(…) Spread Operator :
…변수명을 쓰면 배열에 있는 나머지 값을 한번에 가져옴

함수 선언 : function mysum1(x, y) {return x + y; }

화살표 함수 :
1. const mysum2 = (x, y) => {return x + y;}
2. const mysum2 = (x, y) => x + y;

---

React 개발 환경 설정
1. 크롬 브라우저
2. VScode (에디터)
3. Git 설치 (버전 관리 툴)

노드 버전 확인 명령어 : node -v

NPM(Node Package Manager) : 패키지를 다운받아 활용 할 수 있는 마켓이자 명령어

yarn : npm의 역할과 동일하지만 성능적으로 개선된 yarn을 사용할 수 있다.

yarn 설치명령어 : sudo npm install -g yarn
yarn 버전 확인 명령어 : yarn -v

---

CRA(Create React App) :
한 줄의 명령어 입력으로 React프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법
=> 보일러플레이트

파일 만들 위치 이동 명령어 : cd 이동할위치
파일 생성 명령어 : mkdir 파일명
리액트 앱 만드는 명령어 : yarn create react-app 리액트앱명
서버 구동 명령어 :
cd 리액트앱명
yarn start

---

리액트 컴포넌트 : 함수형(권장)/ 클래스형
컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러조각으로 나누고, 각 조각을 개별적(독립적)으로 살펴볼 수 있다.

JavaScript함수와 유사하다. = Input과 output이 있다.

“props”라고 하는 임의의 입력(input)을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환(output)한다.

결론적으로 리액트 세계에서 말하는 컴포넌트는 함수이다. html/ JSX을 return하는 함수를 만들면 된다.