2022.07.12

p51~100

리액트 플젝 시에는 깃 cmd 창보다는 bash 애뮬레이터 사용이 좋음. 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하는 것이 주목적.)

create-react-app 은 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 플젝 작업 환경을 구축해주는 도구. 

 

import 를 시용하여 다른 파일들을 불러와 사용 가능. 이렇게 모듈을 불러와서 사용하는 것 -> 원래 브라우저에는 없던 기능. node.js 에서 지원하는 기능임. 브라우저에서도 사용하기 위해 번들러를 사용. 대표적인 번들러 = 웹팩. 편의성, 확장성 때문. 웹팩 사용 시 SVG 파일과 CSS 파일도 불러와서 사용 가능. 파일을 불러오는 역할은 웹팩의 로더라는 기능이 담당. 

 

플젝에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냄. 함수에서 반환하는 코드는 JSX 임. 이는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨. JSX 는 공식적인 자바스크립트 문법이 아님에 주의!

 

JSX 의 장점 

1. 보기 쉽고 익숙 2. 더욱 높은 활용도 (컴포넌트를 html 태그 쓰듯이 작성 가능) 

 

JSX 문법 

1. 컴포넌트에 요소 여러 개가 있을 경우 반드시 부모 요소 하나로 감싸야 한다. (Fragment 사용하여 div 가 아닌 태그도 사용 가능)

2. JSX 내 코드를 {} 로 감싼 뒤 자바스크립트 표현식 작성 가능.

*let 과 const 는 스코프가 블록 단위이며 var 은 스코프가 함수 단위이다. 

기본적으로 const 를 사용, 해당 값을 바꿔야할 때는 let 을 사용하자 

3. if 문 대신 조건부 연산자 

jsx 밖에서 if 문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 됨. (삼항 연산자 ? :)

4. && 연산자를 사용한 조건부 렌더링. 리액트에서 false 를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문에. (예외: falsy 한 값인 0 은 예외적으로 화면에 나타남)

5. undefined 를 렌더링하지 않기 

리액트 컴포넌트에서는 함수에서 undefined 만 반환하여 렌더링하는 상황을 만들면 안 됨. 단 jsx 내부에서 undefined 를 렌더링하는 것은 ok. 

6. 인라인 스타일링 

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 하며, 스타일 이름 중에서 -문자가 포함되는 이름이 있는 경우 -를 없애고 카멜 표기법으로 작성해야 함. 

7. class 대신 className 

8. 꼭 닫아야 하는 태그 

9. 주석 {/* */}

 

ESLint Prettier 적용하기

 

컴포넌트를 선언하는 방식: 함수, 클래스형  차이: 클래스형의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음. 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고 그안에서 보여 주어야할 jsx 를 반환해야 함. 

 

리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hookds 를 사용하도록 권장 중. 

 

props 는 properties 를 줄인 표현, 컴포넌트의 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능. 

 

props 기본값 설정은 defaultPRops 로 한다. 

props.children 은 태그 사이에 작성한 문자열을 보여준다. 

 

비구조화 할당 문법 통해 props 내부 값 추출 

 

propTypes 를 통한 props 검증 -> import 를 사용해서 propTypes 를 불러 와야 함. 컴포넌트의 필수 props 를 지정하거나 props 의 타입을 지정할 때 사용함. propTypes 를 지정하지 않았을 때 경고 메시지를 띄우려면 isRequired 를 사용.