Read Me

이번 유닛에서는 React로 프론트엔드를 구축할 때, 보다 구조적으로 코드를 작성하는 방법에 대해 배워보겠습니다.

Before You Learn

JSX 문법의 개념에 대해 이해하고 활용할 수 있다.
- js문법은 {} 안에
- 컴포넌트 이름은 대문자로
- 조건식은 삼항식으로
- 모든 태그들은 큰 태그 안에
- className = 이름
- html에 반복적으로 적용하고 싶은 건 map, key필요
Component의 개념에 대해 이해하고 작성할 수 있다.
- 독립적인 기능 하나를 구현하는 여러 코드의 묶음
- application = root component - children(child * n개) - children
- UI 기반
React SPA
- create-react-app : babel 등 [jsx —babel—> js]의 react를 위한 패키지들 + app 만들어준다
  
  → spa를 쉽고 빠르게 개발할 수 있게 만들어진 툴체인
  
  → 배포용 웹 어플리케이션을 만들기 위해 필요한 많은 패키지가 있는 모듈 번들러
```
**npx** create-react-app '만들고 싶은 앱 이름' 
//react-scripts, react, react-dom 등을 모두 설치한다
//package.json : scripts : react가 들어가서 npm start하면 앱이 실행된다 
```
  → react-scripts start 또는 npm run start 또는[localhost](<http://localhost>):3000
- index.js
```
//import src파일 > components > component 파일에서 export한 컴포넌트의 이름들 

ReactDOM.render(
	<App>, 
	document.getElementById('root'))
```
- 장단점

State & Props의 개념과 차이에 대해 이해하고 상황에 맞게 적용할 수 있다.

props : 외부로부터 받는 정보, 객체 형태

부모 컴포넌트 → 자식 컴포넌트

const Parent = () => { 
return <Child propsName = value/>
//속성=값을 안 정해주면 props 객체가 생성되지 않는다
}

const Child = (prop) => { 
prop.propsName으로 활용
}

const Child = ({propsName}) => { 
propsName(value와 같은 값)으로 활용
}

state : 상태

import {useState} from “react”;

const [state, setState] = useState(초기값)

useState() = 배열 리턴
배열[0] = state 변수 : 초기값 
배열[1] = setState : state변수 갱신 함수

state 갱신 과정(예시)
1. 상태를 바꿔야 하는 컴포넌트의 html에 value={state}
2. 해당 컴포넌트에 상태 변경 감지 속성 넣기 onChange = {이벤트 핸들러 함수}
3. 이벤트 핸들러 함수 선언 setState(갱신할 값) 넣기
4. 상태 변경에 따라 달라져야 하는 부분 만들기 : 다른 컴포넌트 생성 등

state hook 주의점

→ react 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링

→ react state는 상태 변경 함수 호출로 변경해야 한다 (state 변수 갱신 함수로)

이유: 직접 변경 시도하면 리렌더링이 안되고, state가 제대로 변경되지 않는다

ex. state.push(1), state[1] = 2, state = 'wrong state

React Effect Hook에 대해 이해하고 활용할 수 있다.
- useEffect(함수, 종속성 배열)
  - useEffect의 첫번째 인자는 함수
```
useEffect(()=> { 

}, [종속성1, 종속성2])
```
  - 해당 함수 내에서 side effect를 실행하면 된다
  - 함수 실행 조건
    
    ⇒ 매번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행된다
    - 컴포넌트 생성 후 처음 화면에 렌더링
    - 컴포넌트에 새로운 props 전달되며 렌더링
    - 컴포넌트에 **상태(state)**가 바뀌며 렌더링
  - 두번째 인자는 종속성 배열
    - 이 배열은 조건을 담고 있다
      
      → boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미
      
      → 해당 배열엔 어떤 값의 목록이 들어갑니다.
      
      배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행됩니다.
    - [ ]
      
      : 컴포넌트가 처음 생성될때만 effect 함수가 실행됩니다.
      
      처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있습니다
    - 아무것도 넣지 않기 (기본 형태)
      
      : 기본 형태의 useEffect는 컴포넌트가 처음 생성
      
      : props가 업데이트
      
      : 상태(state)가 업데이트될 때 effect 함수가 실행됨
Hook을 쓸 때 주의할 점
- 최상위에서만 Hook 호출
- React 함수 내에서 Hook 호출 ex. 컴포넌트 내에서
Effect Hook - 조건부 실행

조건부 effect 발생 (dependency array)

useEffect(함수, 배열)

useEffect의 두 번째 인자는 배열

이 배열은 조건을 담고 있다

→ boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미

→ 해당 배열엔 어떤 값의 목록이 들어갑니다.

이 배열을 특별히 **종속성 배열**이라고 부릅니다.

Lifting State up의 개념을 이해하고 있다.

상위 컴포넌트에 하위 컴포넌트에서 일어나는 일이 영향을 미치는 경우

: props로 이벤트 핸들러를 보낸다

: 핸들러 함수는 함수에 있는 일로 발동이 되지만 상위 컴포넌트에 있어서 상위에서 실행된다

const [filter, setFilter] = useState([])
const eventHandlerFunction = (item) => { 
	setFilter([...filter,item])
}

const Parent = () => { 
return 
<div>
filter.map((el)=> {
<div key= {el.id}>
...
</div>
})

<Child propertyName ={eventHandlerFunction} />
</div>
}

const Child = ({propertyName}) => { 
propertyName(item);
} 

value = {state} onChange={}

Achievement Goals

컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
컴포넌트 UI 개발에 도움을 주는 라이브러리인 **Storybook**을 활용할 수 있다.
구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 **Styled-Component**를 활용할 수 있다.
DOM Reference를 활용하기 위한 **useRef Hook**을 활용할 수 있다.

컴포넌트 단위로 개발하기

Component Driven Development

재사용할 수 있고 조립할 수 있는 부품 단위의 UI 컴포넌트를 만들어 나가는 개발

Read Me

Before You Learn

장단점

Hook을 쓸 때 주의할 점

Effect Hook - 조건부 실행

조건부 effect 발생 (dependency array)

Achievement Goals

컴포넌트 단위로 개발하기

Component Driven Development