리액트를 다루는 기술을 읽으며 공부

왜? 멋사 세션도 해야하니 .. . .
응응 drf 해야징

1장 : 리액트 시작

맨날 강의 리액트 앞부분만 들어서 읽어보는 것으로 넘어가고

npm create react-app hello-react-app

리액트 프로젝트 만드는 법~

2장 : JSX

2-1 : 코드 이해하기

import 구문

node_modules 라는 디렉터리에 react 모듈 설치됨

import 구문을 통해 리액트 불러올 수 있음

• 원래 브라우저에는 모듈을 불러오는 기능이 없음 -> ‘번들’ 사용
• 대표적인 번들러 : 웹팩, Parcel, browserify
• 번들러 도구는 import로 모듈을 불러왔을 때 불러온 모듈을 합쳐서 하나의 파일로 생성

import logo from ‘./logo.svg’;

• 웹팩을 사용하면 svg, css 파일도 불러옴
• 웹팩의 로더가 담당

2-2 : JSX란?

얘도 많이 보고 써봤으니 읽고 넘어가자

자바스크립트의 확장 문법

• 브라우저 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 자바스크립트 형태의 코드로 변환

2-3 : JSX의 장점

1. 보기 쉽고 익숙하다
2. 활용도

2-4 : JSX의 규칙

얘도 알고 있죵

1. 감싸인 요소

• 하나의 요소로 꼭 감싸줘야함
  왜? 가상 돔이 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 돔 트리로 이루어져야 함

2. 자바스크립트 표현

• { } 얘로 자바스크립트 표혁식 사용

3. 조건부 연산자

• 삼항 연산자 사용 ㄱ ㄱ

4. AND 연산자를 사용한 조건부 렌더링

return <div> { name === ‘react’ ? <h1>react</h1> : null } </div>;

아 쫌 길다 짧게 && 사용해서 ㄱㄴ

return <div> { name === ‘react’ && <h1>react</h1>} </div>;

5. undefined 렌더링하지 않기
6. 인라인 스타일링

• 객체 형태로 넣어줘야함
• 카멜표기법

7. className
8. 꼭 닫아야하는 태그

• <input /> : self-closing

9. 주석

• {/* 주석은 이렇게 */}

흠 다 아는 군

2.5 : ESLint, Prettier 적용하기

또이와 플젝할 때 이게 뭐야.. 했던 린트.. . .

• ESLint : 문법 검사 도구
• Prettier : 코드 스타일 자동 정리 도구. 커스터마이징 가능

Prettier 커스터마이징하기

1. 루트 디렉터리(src, public 있는 곳)에 .prettierrc 파일 생성
2. 객체 형태로 커스터마이징 ㄱ ㄱ

{
	"singleQuote": true,
	"semi": true,
	"useTabs": true,
	"tabWidth": 2
}

3. 자동 저장하기 : 파일>기본설정>format on save 체크

흠 대부분 아는 내용이라 굳~