개발 환경 설정 도구
CRA 도구
CRA(create-react-app)는 별도의 설정 없이도 SPA 리액트 애플리케이션을 개발할 수 있도록 지원하는 도구
리액트 프로젝트를 진행할 때 필요한 webpack 설정을 자동화하여 개발 환경을 구축해 줌
-
ES6 기반
npx create-react-app [프로젝트명] -
타입스크립트 기반
npx create-react-app [프로젝트명] --template typescript
Vite 도구
Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프론트엔드 개발 도구
빌드와 개발 서버 구동 시간이 매우 빠르다.
Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드함
기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발서버를 구동하므로 시간이 오래 걸렸다.
이와 같은 문제점을 Vite는 Native ESM이라는 브라우저의 자체적인 모듈 기능을 사용하여 해결
Vite가 실행하는 개발 서버는 브라우저가 요청하는 모듈을 전송해주고, 모듈 번들링 기능을 브라우저가 수행하기 때문에 개발 서버의 구동이 아주 빠름
-
ES6 기반
npm init vite [프로젝트명] -- --template react
yarn init vite [프로젝트명] -- --template react -
타입스크립트 기반
npm init vite [프로젝트명] -- --template react -ts
yarn init vite [프로젝트명] -- --template react -ts
{ }
보간법(interpolation)
JSX의 { }에는 리턴값을 가지는 표현식(expression)이라면 무엇이든지 배치할 수 있다.
JSX
JSX(Javascript XML)는 HTML처럼 보이지만 실제로는 자바스크립트 확장이다.
자바스크립트 코드로 변환되어 실행된다는 뜻
JSX의 사용이 필수는 아니지만 UI를 표현하는 데 적합해서 협업하기 편리함
자바스크립트 코드이므로 자바스크립트 언어라는 의미가 변형되지 않으면서도 애플리케이션 화면의 구조를 시각화하여 표현할 수 있다.
주의사항
- "요소의 Attribute는 카멜 표기법(camel casing)을 준수해야 한다"
다양한 표기법
- 파스칼 표기법
첫 문자를 대문자로 표현하고 새로운 단어가 시자갈 때마다 대문자로 시작
ex) PascalCasing- 카멜 표기법
첫 문자를 소문자로 표기하고 새로운 단어가 시작할 때마다 대문자로 시작함
마치 낙타의 등 모양처럼 보인다고 해서 이름 붙은 표기법
주로 객체, 변수, 인스턴스 등의 이름을 지정할 때 사용하는 표기법
ex) camelCasing- 케밥 표기법
모두 소문자를 사용하여 새로운 단어가 시작할 때마다 하이픈(hyphen: -) 기호를 붙임
대소문자를 구별하지 않는 환경에서 주로 사용
ex) kebob-casing- 스네이크 표기법
모두 소문자를 사용하며 새로운 단어가 시작할 때마다 언더스코어(underscore: _ ) 기호를 붙임
ex) snake_casing
- "속성 명이 DOM API 스펙에 기반을 두고 있다"
HTML에서는 class라는 속성으로 CSS 클래스명을 지정하지만, 자바스크립트 코드에서는 className 속성으로 클래스명을 지정함
JSX는 HTML처럼 보이지만 실제로는 자바스크립트 코드이기 때문에 className 속성으로 사용해야만 한다.
- "보간법({ } : interpolation)을 사용할 때는 표현식을 사용해야 한다"
{ } 안에는 값, 메서드의 리턴값, 속성 등의 표현식(expression)을 작성할 수 있지만 문제(statement)을 작성할 수는 없다.
{ }는 무엇인가 데이터를 UI로 렌더링하려는 것이 목적이므로 반드시 값(리턴값)이 있어야 함
예를 들어 if, for문은 리턴값이 없으므로 사용불가
-
"{ } 내에 보간된 HTML 문자열은 인코딩 된다"
{ } 내부에 배치한 표현식에 의해 리턴되는 값이 문자열인 경우, 모두 HTML 인코딩 된다는 점을 주의해야 한다.
웹 애플리케이션에서 흔히 발생하는 XSS(Cross Site Scripting)같은 공격에 대비하기 위함이다.만일 HTML 마크업 형태의 값을 보간하려고 한다면 두 가지 방법을 사용할 수 있다.
- dangerouslySetInnerHTML 특성 사용
<span dangerouslySetInnerHTML={{ __html: msg }} />- JSX가 XSS 공격에 안전하므로 HTML 문자열 대신 JSX를 사용
// let msg = "<i>World</i>"; let msg = (<i>World</i>)
- "JSX는 단일 루트 요소만 렌더링 할 수 있다"
JSX는 루트 요소가 여러 개면 에러가 발생함
따라서 JSX 코드에서 반드시 루트 요소는 하나만 작성해야 한다.
시작 태그와 마감 태그에 태그명이 없는 형식으로< ></>와 같이 작성하면 된다.
속성
속성(props)을 이용하면 사위 컴포넌트(부모 컴포넌트)로부터 데이터를 전달받도록 작성할 수 있음
자식 컴포넌트에서는 부모 컴포넌트로부터 전달받은 정보를 변경할 수 없다.
만일 여러 자식 컴포넌트에서 데이터가 변경되면 데이터가 어디서 어떻게 변경되는지 추적하기가 어려움
리액트는 데이터가 바뀌면 UI가 갱신되도록 설계되어 있음
따라서 디버깅을 할 때 중점적으로 살펴봐야 할 것은 바로 데이터가 어떻게 변경되느냐이다.
속성 정의
자식 컴포넌트에서 속성을 정의하려면 우선 type 또는 interface를 이용해 속성의 타입을 정의한다.
그 후에 함수 컴포넌트의 인자로 props를 선언하고 사용
// Type 사용
type TestPropsType = {
name : string;
age : number;
}
const Test = (props: TestPropsType) => {
...
}
// Interface 사용
interface ITestProps {
name : string;
age : number;
}
const Test = (props: ITestPropsType) => {
...
}부모 컴포넌트에서 자식 컴포너트로 속성을 전달할 때는 보간법을 활용함
<Test name={yourName} age={yourAge} />컴포넌트의 세분화
장점
-
컴포넌트 기능이 단순해지기 때문에 에러가 발생할 가능성이 줄어들며 디버깅과 테스트가 쉬워짐
-
컴포넌트 재사용성이 높아짐
한 컴포넌트에 너무 많은 기능이 포함되면 UI와 기능이 모두 일치해야 재사용이 가능하지만, 컴포넌트를 세분화하여 각 컴포넌트의 기능을 단순하게 작성하면 재사용성이 높아진다. -
렌더링 성능을 최적화하기가 더 용이함
리액트는 컴포넌트 단위로 렌더링 여부를 결정하는데, 컴포넌트 내부의 데이터와 속성이 일치한다면 렌더링을 하지 않도록 컴포넌트를 작성할 수 있다.
상태
상태(state)는 컴포넌트가 보유하고 관리하는 데이터
상태의 변경은 상태를 보유한 컴포넌트에서만 수행한다.
특히 상태를 속성으로 자식 컴포넌트에 전달할 경우, 자식 컴포넌트에서 그 속성을 변경해서는 안 됨
- 상태 컴포넌트 (stateful component)
- 무상태 컴포넌트 (stateless compnent)
자신의 상태가 없으므로 속성을 통해서 부모 컴포넌트로부터 데이터를 전달받아야만 하는 컴포넌트
재사용성이 상태 컴포넌트보다 뛰어남
일반적으로 화면 단위로 부모 컴포넌트에 상태를 집중시키고 속성을 통해 상태를 전달하도록 함
상태의 초기화
함수 컴포넌트에서 상태는 useState()라는 리액트 훅(react hook)을 이용하여 초기화
타입스크립트를 사용할 때는 정적 타입을 제네릭으로 지정할 수 있다.
useState
초깃값을 부여하고 다면 useState() 함수의 인자로 초깃값을 전달
리턴값은 배열인데 첫번째 배열 항목은 읽기 전용의 속성(getter)이며,
두 번째 배열 항목은 상태를 설정하기 위해 사용하는 전용 세터(setter) 함수
상태의 변경은 반드시 세터 함수를 이용해야 함
리턴값에서 두 개의 값을 한 번에 받아낼 때는 ES6 문법의 구조 분해 할당(destructuring assignment) 방법을 자주 사용
// 초기화 방법
const [getter, setter] = useState<Type>(defaultValue);