1. State

Component State
React v16.8 이전 버전에서는 함수형 컴포넌트에 staet를 사용 불가능했음
리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서, 함수형 컴포넌트에 staet를 사용 가능
그래서 리액트에는 두 가지 종류의 state가 있음
1. 클래스형 컴포넌트에서 쓰는state
2. 함수형 컴포넌트에서 useState()라는 함수를 통해 사용하는 state
State = 바뀌는 데이터

1.1 함수형 컴포넌트에서 state 사용

💡 JS 문법 : Destructuring (비구조화 할당)

Array에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법

1/* 배열에 있는 값이 유용해서 변수로 빼려면? */
2// 📝 기존 방법
3let num = [1, 2]
4let a = num[0]
5let b = num[1]
6
7//  📝 Destructuring 문법 : Array에 있는 값을 변수로 빼줌
8// 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으로 알아서 변수가 생성됨
9let [c, d] = [1, 2]

state 쓰려면 react로부터 import 해와야 합니다.

1import { useState } from 'react' // 추가
2
3function App() {
4  // [초기변수, 변경도와주는 함수] = useState(초기값)
5  let [a, b] = useState('저쩌구') // ['저쩌구', state변경을 도와주는 함수]
6  // a 변수에는 '저쩌구'라는 값이 초기값으로 할당
7  // b 함수는 a 변수의 값의 수정을 도와주는 함수가 항당
8
9  return <h1>{a}</h1>
10}

1.2 변수 대신 state 쓰는 이유

state = 값이 변하는 변수같은 거
- 변동사항이 생기면 state쓰는 HTML도 자동으로 재렌더링해줌
- e.g. 상품명, 글제목, 가격처럼 자주 변할 것 같은 데이터들
그렇다면 바뀌지 않는 데이터들은? state로 굳이 저장할 필요없음
- e.g. 로고같은 것들

2. Props

Props = 컴포넌트 속성을 설정할 때 사용하는 요소
- 부모의 state 가져오기
- 함수 파라미터랑 같은 문법
컴포넌트 2개가 부모/자식 관계인 경우엔 가능
부모 컴포넌트의 state를 자식 컴포넌트로 전송
c.f. properties(속성)의 약어
c.f. https://reactjs.org/docs/components-and-props.html
c.f. https://ko.reactjs.org/docs/components-and-props.html

2.1 컴포넌트 합성(Composing Components)

컴포넌트 합성(Composing) = 여러 개의 컴포넌트들을 하나로 만드는 것

1// 1. 부모 컴포넌트의 state를 자식 컴포넌트 <Modal>에 전송
2export default function Composition() {
3  return (
4    <div>
5      <Welcome name="메시" />
6      <Welcome name="호날두" />
7      <Welcome name="네이마르" />
8    </div>
9  )
10}
11
12// 2. 자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후`props.받아온 부모state`로 사용
13function Welcome(props) {
14  return <h1>Hello, {props.name}</h1>
15}

2.2 컴포넌트 추출(Extracting Components)

컴포넌트 추출(Extracting) = 하나로 된 컴포넌트에서 의미있는 값들을 분리(추출)

1function formatDate(date) {
2  return date.toLocaleDateString()
3}
4
5function Comment(props) {
6  return (
7    <div className="Comment">
8      <div className="UserInfo">
9        <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} />
10        <div className="UserInfo-name">{props.author.name}</div>
11      </div>
12      <div className="Comment-text">{props.text}</div>
13      <div className="Comment-date">{formatDate(props.date)}</div>
14    </div>
15  )
16}
17
18const comment = {
19  date: new Date(),
20  text: 'I hope you enjoy learning React!',
21  author: {
22    name: 'Hello Kitty',
23    avatarUrl: 'http://placekitten.com/g/64/64',
24  },
25}
26
27export default function Extraction() {
28  return <Comment date={comment.date} text={comment.text} author={comment.author} />
29}

위 코드에서 의미있는 값들을 추출(분리)하면 아래처럼 추출(분리)할 수 있음

1function formatDate(date) {
2  return date.toLocaleDateString()
3}
4
5// Comment 컴포넌트 안에 있던 여러 데이터들을 의미있는 값들을 기준으로 분리함
6// 이렇게 분리하면 재사용성 좋음
7function Avatar(props) {
8  return <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
9}
10
11function UserInfo(props) {
12  return (
13    <div className="UserInfo">
14      <Avatar user={props.user} />
15      <div className="UserInfo-name">{props.user.name}</div>
16    </div>
17  )
18}
19
20function Comment(props) {
21  return (
22    <div className="Comment">
23      <UserInfo user={props.author} />
24      <div className="Comment-text">{props.text}</div>
25      <div className="Comment-date">{formatDate(props.date)}</div>
26    </div>
27  )
28}
29
30const comment = {
31  date: new Date(),
32  text: 'I hope you enjoy learning React!',
33  author: {
34    name: 'Hello Kitty',
35    avatarUrl: 'http://placekitten.com/g/64/64',
36  },
37}
38
39export default function Extraction() {
40  return <Comment date={comment.date} text={comment.text} author={comment.author} />
41}

03-컴포넌트 05-조건부 렌더링