React) 기초 속성 요약

1. React 설치

• node.js 설치
• npm -v 으로 npm 설치 확인
• npm i -g create-react-app
• 프로젝트를 진행할 폴더 생성
• npx create-react-app (폴더 경로)

2. JSX

• JSX : A syntax extension to Javascript = Javascript + XML/HTML
• JS 코드 안에서 html, xml 코드를 사용해줄 수 있다.

// 예제1
const inputBox = <input type='text' />
...
return inputBox;

// 예제2
...
return <div className='wrapper'>{inputBox}</div>

// 예제3
const [id, setId] = useState('jun17183');
const inputId = <input type='text' value={id} onChange={(e) => setId(e.target.value)} />

3. component

• 앱을 이루는 최소한의 단위
• 파스칼 케이스로 표기

component 예시

4. props

• component에 전달할 다양한 정보를 담고 있는 자바스크립트 객체
• props는 read-only다. = 값을 변경할 수 없다.
• 전달받는 컴포넌트에서는 props라는 인자명으로 받을 필요 없이 { name, age }와 같은 형태로도 props를 전달받을 수 있다.

// pure func
function sum(a, b) { return a + b; }

// impure func
function withdraw(account, amount) { account.total -= amount; }	// 입력받은 값을 직접 변경

// props와 component도 pure func와 같은 형태를 띄어야 한다.
// ★ 같은 props에 대해서는 항상 같은 결과를 보여줄 것! ★

props 예시

5. state

• compnent의 변경 가능한 데이터
• 랜더링이나 데이터 흐름에 사용되늰 값만 state에 포함시켜야 한다.
• state는 직접 수정할 수 없다. (하면 안 된다.)

state 예시

6. useState, useEffect

• 기존의 함수형 컴포넌트는 클래스형 컴포넌트와 다르게 state 사용, 생명주기에 따른 기능 구현 불가
• 하지만 React Hook을 통해 함수형 컴포넌트에서도 state 사용과 생명주기에 따른 기능 구현이 가능해졌다.
• useState를 통해 state를 정의하고 useEffect를 통해 생명주기에 따른 기능을 구현한다.

useState 예시

• useEffect 함수는 콜백 함수와 의존성 배열을 인자 값으로 받는데, 의존성 배열에 아무 값이 없다면 mount, unmount 시에만 실행된다.
• 의존성 배열에는 state 값이 들어갈 수 있는데, state 값이 들어가면 state 값이 변경될 때에도 useEffect가 실행된다.

useEffect 예시