- 진도 : 1. 설치 ~ 2. Quick Start
1. 미니파이어(minifier)
- 정의 : 코드의 개행/띄어쓰기 제거, 변수명 길이를 줄여(uglify) 코드를 더 빠르게 로드할 수 있도록 만들어주는 것
- 파일명이 production.min.js라고 되어있다면 미니파이가 끝났다는 의미
- 대표적인 미니파이어 : Terser, swc
2. index.html
- React는 root id를 가진 div안에 내용을 그려주기 때문에 개발자가 div태그 안에 어떠한 글을 써도 반영되지 않음
// index.html
<body>
<div id='root'>
어떠한 글을 써도 반영되지 않음
어차피 리액트가 컴포넌트 그리면서 덮어 씌울 거임...
</div>
</body>- index.html에 필요한 만큼 root html태그를 가질 수 있지만 SPA를 위한 어플리케이션을 제작하는 경우엔 비추천
3. 다양한 방법으로 컴포넌트 추가하기
React 컴포넌트는 항상 대문자로 시작해야 하지만, 함수명이 대문자일 필요는 없음
단, JSX 안에서 컴포넌트가 사용될 때에는 반드시 대문자로 시작해야 한다는 것에 유의!
1. 함수가 소문자로 시작할 경우에도 문제 없이 동작하도록 하는 여러 기법
default export의 경우:import시에 대문자로 시작하는 새로운 이름을 부여 (예:DefaultProfile)
named export의 경우:import시에as로 대문자로 시작하는 새로운 이름을 부여 (예:NamedTwo)- 컴포넌트 외부에서 대문자로 시작하는 새로운 변수에 할당 (예:
NamedThree) - 컴포넌트 내부에서 대문자로 시작하는 새로운 변수에 할당 (예:
NamedFour)
4. 논리 연산자 &&를 이용한 조건부 렌더링 시 주의사항
위의 예제는 user의 id의 존재 여부에 따라 논리 연산자 && 를 사용해 조건부 렌더링을 구현한 예제로, JavaScript에서 0은 falsy 값이므로 아무것도 렌더링이 되지 않아야 하지만 위의 예제에서는 0이 렌더링 되어 보여짐
JavaScript에서 && 연산자는 앞의 조건이 falsy 한 값이라면, 해당 객체를 반환하기 때문에 위의 예제에서는 0이 반환 되어 렌더링 되는 것!
그러므로 가급적 삼항연산자를 사용하는 편이 좋음
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자