1
// App 컴포넌트
2
<Header user={user} />
3

4
// ---------------------------
5
// Header 컴포넌트
6
<SearchBar user={user} />

1
📦 src
2
├─ components
3
│  ├─ Content.jsx
4
│  ├─ Footer.jsx
5
│  ├─ Header.jsx
6
│  └─ Page.jsx
7
├─ App.css
8
└─ App.js

1
import React from 'react'
2

3
export default function Content({ isDark }) {
4
  return (
5
    <div
6
      className="content"
7
      style={{
8
        backgroundColor: isDark ? 'black' : 'lightgray',
9
        color: isDark ? 'white' : 'black',
10
      }}
11
    >
12
      <p>메시님, 안녕하세요!</p>
13
    </div>
14
  )
15
}

1
import React from 'react'
2

3
export default function Footer({ isDark, setIsDark }) {
4
  const toggleTheme = () => {
5
    setIsDark(!isDark)
6
  }
7
  return (
8
    <footer className="footer" style={{ backgroundColor: isDark ? 'black' : 'lightgray' }}>
9
      <button className="button" onClick={toggleTheme}>
10
        Dark Mode
11
      </button>
12
    </footer>
13
  )
14
}

1
import React from 'react'
2

3
export default function Header({ isDark }) {
4
  return (
5
    <header
6
      className="header"
7
      style={{
8
        backgroundColor: isDark ? 'black' : 'lightgray',
9
        color: isDark ? 'white' : 'black',
10
      }}
11
    >
12
      <h1>Welcom 메시!</h1>
13
    </header>
14
  )
15
}

1
import React from 'react'
2
import Header from './Header'
3
import Content from './Content'
4
import Footer from './Footer'
5

6
export default function Page({ isDark, setIsDark }) {
7
  return (
8
    <div className="page">
9
      <Header isDark={isDark} />
10
      <Content isDark={isDark} />
11
      <Footer isDark={isDark} setIsDark={setIsDark} />
12
    </div>
13
  )
14
}

1
* {
2
  box-sizing: border-box;
3
  margin: 0;
4
  font-family: sans-serif;
5
}
6

7
.page {
8
  width: 100%;
9
  height: 100vh;
10
  display: flex;
11
  flex-direction: column;
12
}
13

14
.header {
15
  width: 100%;
16
  height: 80px;
17
  border-bottom: 2px solid gray;
18
  display: flex;
19
  justify-content: center;
20
  align-items: center;
21
}
22

23
.content {
24
  flex: 1;
25
  display: flex;
26
  justify-content: center;
27
  align-items: center;
28
  font-size: 30px;
29
}
30

31
.footer {
32
  width: 100%;
33
  height: 80px;
34
  border-top: 2px solid gray;
35
  display: flex;
36
  justify-content: flex-end;
37
  align-items: center;
38
}
39

40
.button {
41
  padding: 10px;
42
  margin-right: 30px;
43
}

1
import React, { useState } from 'react'
2
import './App.css'
3
import Page from './components/Page'
4

5
function App() {
6
  const [isDark, setIsDark] = useState(false)
7

8
  return <Page isDark={isDark} setIsDark={setIsDark} />
9
}
10

11
export default App

1
📦 src
2
├─ components
3
│  ├─ Content.jsx
4
│  ├─ Footer.jsx
5
│  ├─ Header.jsx
6
│  └─ Page.jsx
7
├─ context # 추가
8
│  ├─ ThemeContext.jsx
9
│  └─ UserContext.jsx
10
├─ App.css
11
└─ App.js

1
// ThemeContext.jsx
2
import { createContext } from 'react'
3

4
export const ThemeContext = createContext(null)
5

6
// -------------------------------------------------------
7
// UserContext.jsx
8
import { createContext } from 'react'
9

10
export const UserContext = createContext(null)

1
import { ThemeContext } from './context/ThemeContext'
2
import { UserContext } from './context/UserContext'
3

4
export default function App() {
5
  const [isDark, setIsDark] = useState(false)
6

7
  return (
8
    // 모든 하위 컴포넌트에 value의 값을 전달
9
    <UserContext.Provider value={'사용자'}>
10
      <ThemeContext.Provider value={{ isDark, setIsDark }}>
11
        <Page />
12
      </ThemeContext.Provider>
13
    </UserContext.Provider>
14
  )
15
}

1
export default function Content() {
2
  const { isDark } = useContext(ThemeContext)
3
  const user = useContext(UserContext)
4

5
  return (
6
    <div
7
      className="content"
8
      style={{
9
        backgroundColor: isDark ? 'black' : 'lightgray',
10
        color: isDark ? 'white' : 'black',
11
      }}
12
    >
13
      <p>{user}님, 안녕하세요!</p>
14
    </div>
15
  )
16
}

1
export default function Footer() {
2
  const { isDark, setIsDark } = useContext(ThemeContext)
3

4
  const toggleTheme = () => {
5
    setIsDark(!isDark)
6
  }
7

8
  return (
9
    <footer className="footer" style={{ backgroundColor: isDark ? 'black' : 'lightgray' }}>
10
      <button className="button" onClick={toggleTheme}>
11
        Dark Mode
12
      </button>
13
    </footer>
14
  )
15
}

1
export default function Header() {
2
  const { isDark } = useContext(ThemeContext)
3
  const user = useContext(UserContext)
4

5
  // console.log(user);
6

7
  return (
8
    <header
9
      className="header"
10
      style={{
11
        backgroundColor: isDark ? 'black' : 'lightgray',
12
        color: isDark ? 'white' : 'black',
13
      }}
14
    >
15
      <h1>Welcom {user}!</h1>
16
    </header>
17
  )
18
}

1
export default function Page() {
2
  return (
3
    <div className="page">
4
      <Header />
5
      <Content />
6
      <Footer />
7
    </div>
8
  )
9
}

1
function Component() {
2
  const value = calculate() // 렌더링될 떄마다, calculate가 반복호출됨 -> 성능이 느려짐(비효율적)
3
  return <div>{value}</div>
4
}
5

6
function calculate() {
7
  return 10
8
}

1
// 렌더링
2
function Component() {
3
  const value = useMemo(() => calculate(), [])
4
  return <div>{value}</div>
5
}
6

7
function calculate() {
8
  return 10
9
}

1
// useMemo(콜백함수, 의존성배열)
2
// - 콜백함수 : 메모이제이션해서 리턴해줄 함수
3
// - 의존성 배열 : 요소의 값이 업데이트될 떄만 콜백함수를 다시 호출
4
// -- 메모이제이션된 값을 업데이트해서 다시 메모이제이션해줌
5
// -- 빈 배열을 넘겨주면, 컴포넌트가 mount되었을 때만 값을 계산하고, 이후에는 항상 메모이제이션된 값을 꺼내씀
6
const value = useMemo(() => {
7
  return calculate()
8
}, [item])

1
import React, { useMemo, useState } from 'react'
2

3
const hardCalculate = number => {
4
  console.log('어려운 계산!')
5
  for (let i = 0; i < 999999; i++) {} // 생각하는 시간
6
  return number + 10000
7
}
8

9
const eashCalculate = number => {
10
  console.log('짱 쉬운 계산!')
11
  return number + 1
12
}
13

14
export default function App() {
15
  const [hardNumber, setHardNumber] = useState(1)
16
  const [easyNumber, setEashNumber] = useState(1)
17

18
  // const hardSum = hardCalculate(hardNumber);
19

20
  // 1. hardNumber가 변경될 떄만 hardCalculate가 다시 호출됨
21
  // 2. hardNumber가 변경되지 않으면, 그 전에 갖고있던 hardNumber의 값을 재사용함
22
  const hardSum = useMemo(() => {
23
    return hardCalculate(hardNumber)
24
  }, [hardNumber])
25
  const easySum = eashCalculate(hardNumber)
26

27
  return (
28
    <div>
29
      <h3>어려운 계산기</h3>
30
      <input type="number" value={hardNumber} onChange={e => setHardNumber(parseInt(e.target.value))} />
31
      <span>+ 10000 = {hardSum}</span>
32
      <h3>쉬운 계산기</h3>
33
      <input type="number" value={easyNumber} onChange={e => setEashNumber(parseInt(e.target.value))} />
34
      <span>+ 1 = {easySum}</span>
35
    </div>
36
  )
37
}

1
import React, { useEffect, useMemo, useState } from 'react'
2

3
export default function App() {
4
  const [number, setNumber] = useState(0)
5
  const [isKorea, setIsKorea] = useState(true)
6

7
  // 1. JS 타입 종류 : 원시타입 | 객체타입(원시타입을 제외한 모든 것, Object, Array)
8
  // - 어떤 변수에 객체타입을 할당하면, 객체타입이 크기가 크기 때문에
9
  // - 메모리 상에 공간이 할당되어 저장되고, 변수에는 메모리 주소가 할당됨
10
  // - 똑같은 객체를 할당해도, 두 메모리 주소가 다르기 때문에 ===을 하면 false 나옴
11
  const location = useMemo(() => {
12
    return {
13
      country: isKorea ? '한국' : '외국',
14
      // 뭔가 오래걸리는 작업을 해야한다면, 꼭 필요할 떄만 호출
15
    }
16
  }, [isKorea])
17

18
  useEffect(() => {
19
    console.log('useEffect 호출')
20
  }, [location])
21

22
  return (
23
    <div>
24
      <h2>하루에 몇끼 먹어요?</h2>
25
      <input type="number" value={number} onChange={e => setNumber(e.target.value)} />
26
      <hr />
27
      <h2>어느 나라에 있어요?</h2>
28
      <p>나라 : {location.country}</p>
29
      <button onClick={() => setIsKorea(!isKorea)}>비행기 타자</button>
30
    </div>
31
  )
32
}

1
const calculate = useCallback(
2
  num => {
3
    return num + 1
4
  },
5
  [item],
6
)
7
// calculate()를 메모이제이션해준다면, useCallback으로 감싸주면 됨
8
// 그러면 calculate()가 필요할 때마다 함수를 새로 생성하는 것이 아니라,
9
// 필요할 떄마다 메모리에서 가져와서 재사용함

1
// 함수형 컴포넌트 안에
2
// calculate변수에 num을 인자로 받는 함수(객체)가 할당되어 있는 형태
3
function Component() {
4
  const calculate = num => {
5
    return num + 1
6
  }
7
  return <div>{value}</div>
8
}

1
function Component() {
2
  const calculate = useCallback(
3
    num => {
4
      return num + 1
5
    },
6
    [item],
7
  )
8
  return <div>{value}</div>
9
}

1
// useCallback(메모이제이션해줄 콜백함수, 의존성배열)
2
const calculate = useCallback(
3
  num => {
4
    return num + 1
5
  },
6
  [item],
7
)
8
// calculate는 메모이제이션된 함수(객체)르 갖게됨
9
// 의존성배열의 값(=item)이 변경되지 않는 이상 다시 초괴화되지 않음

1
import React, { useCallback, useEffect, useState } from 'react'
2

3
export default function App() {
4
  const [number, setNumber] = useState(0)
5
  const [toggle, setToggle] = useState(true)
6

7
  const someFunction = useCallback(() => {
8
    console.log(`someFunc: number: ${number}`)
9
    return
10
  }, [number])
11

12
  useEffect(() => {
13
    console.log('someFunction이 변경되었습니다.')
14
  }, [someFunction])
15

16
  return (
17
    <div>
18
      <input type="number" value={number} onChange={e => setNumber(e.target.value)} />
19
      <button onClick={() => setToggle(!toggle)}>{toggle.toString()}</button>
20

21
      <button onClick={someFunction}>Call someFunc</button>
22
    </div>
23
  )
24
}

1
import React, { useEffect, useState } from 'react'
2

3
export default function Box({ createBoxStyle }) {
4
  const [style, setStyle] = useState({})
5

6
  useEffect(() => {
7
    console.log('박스 키우기')
8
    setStyle(createBoxStyle())
9
  }, [createBoxStyle])
10

11
  return <div style={style}></div>
12
}

1
import React, { useCallback, useState } from 'react'
2
import Box from './Box'
3

4
export default function App() {
5
  const [size, setSize] = useState(100)
6
  const [isDark, setIsDark] = useState(false)
7

8
  const createBoxStyle = useCallback(() => {
9
    return {
10
      backgroundColor: 'pink',
11
      width: `${size}px`,
12
      height: `${size}px`,
13
    }
14
  }, [size])
15

16
  return (
17
    <div style={{ background: isDark ? 'black' : 'white' }}>
18
      <input type="number" value={size} onChange={e => setSize(e.target.value)} />
19
      <button onClick={() => setIsDark(!isDark)}>Change Theme</button>
20
      <Box createBoxStyle={createBoxStyle} />
21
    </div>
22
  )
23
}

1
import React, { useReducer, useState } from 'react'
2

3
// reducer - state를 업데이트하는 역할(은행)
4
// dispatch - state를 업데이트하는 요구
5
// action - 요구하는 내용
6

7
const ACTION_TYPES = {
8
  deposit: 'deposit',
9
  withdraw: 'withdraw',
10
}
11

12
const reducer = (state, action) => {
13
  console.log('reducer가 일을 합니다!', state, action)
14
  switch (action.type) {
15
    case ACTION_TYPES.deposit:
16
      return state + action.payload
17
    case ACTION_TYPES.withdraw:
18
      return state - action.payload
19
    default:
20
      return state
21
  }
22
}
23

24
export default function App() {
25
  const [number, setNumber] = useState(0)
26
  const [money, dispatch] = useReducer(reducer, 0) // reducer, 초기값
27

28
  return (
29
    <div>
30
      <h2>useReducer 은행에 오신 것을 환영합니다.</h2>
31
      <p>잔고: {money}원</p>
32
      <input type="number" value={number} onChange={e => setNumber(parseInt(e.target.value))} step="1000" />
33
      <button onClick={() => dispatch({ type: ACTION_TYPES.deposit, payload: number })}>예금</button>
34
      <button onClick={() => dispatch({ type: ACTION_TYPES.withdraw, payload: number })}>출금</button>
35
    </div>
36
  )
37
}

1
import React from 'react'
2

3
export default function Student({ name, dispatch, id, isHere }) {
4
  return (
5
    <div>
6
      <span
7
        style={{
8
          textDecoration: isHere ? 'line-through' : 'none',
9
          color: isHere ? 'grey' : 'black',
10
        }}
11
        onClick={() => dispatch({ type: 'mark-student', payload: { id } })}
12
      >
13
        {name}
14
      </span>
15
      <button onClick={() => dispatch({ type: 'delete-student', payload: { id } })}>삭제</button>
16
    </div>
17
  )
18
}

1
import React, { useReducer, useState } from 'react'
2
import Student from './Student'
3

4
const reducer = (state, action) => {
5
  switch (action.type) {
6
    case 'add-student':
7
      const name = action.payload.name
8
      const newStudent = {
9
        id: Date.now(),
10
        name,
11
        isHere: false,
12
      }
13
      return {
14
        count: state.count + 1,
15
        students: [...state.students, newStudent],
16
      }
17
    case 'delete-student':
18
      return {
19
        count: state.count - 1,
20
        students: state.students.filter(student => student.id !== action.payload.id),
21
      }
22
    case 'mark-student':
23
      return {
24
        count: state.count,
25
        students: state.students.map(student => {
26
          if (student.id === action.payload.id) {
27
            return { ...student, isHere: !student.isHere }
28
          }
29
          return student
30
        }),
31
      }
32
    default:
33
      return state
34
  }
35
}
36

37
const initialState = {
38
  count: 0,
39
  students: [],
40
}
41

42
export default function App() {
43
  const [name, setName] = useState('')
44
  const [studentsInfo, dispatch] = useReducer(reducer, initialState)
45

46
  return (
47
    <div>
48
      <h1>출석부</h1>
49
      <p>총 학생 수 : {studentsInfo.count}</p>
50
      <input type="text" placeholder="이름을 입력하세요" value={name} onChange={e => setName(e.target.value)} />
51
      <button onClick={() => dispatch({ type: 'add-student', payload: { name } })}>추가</button>
52
      {studentsInfo.students.map(student => {
53
        return (
54
          <Student key={student.id} name={student.name} dispatch={dispatch} id={student.id} isHere={student.isHere} />
55
        )
56
      })}
57
    </div>
58
  )
59
}

1
import React from 'react'
2

3
export default function Child({ name, age }) {
4
  console.log('👶자녀  컴포넌트가 렌더링이 되었어요.')
5

6
  return (
7
    <div style={{ border: '2px solid powderblue', padding: '10px' }}>
8
      <h3>👶자녀</h3>
9
      <p>name: {name}</p>
10
      <p>age: {age}</p>
11
    </div>
12
  )
13
}

1
import { useState } from 'react'
2
import Child from './Child'
3

4
export default function App() {
5
  const [parentAge, setParentAge] = useState(0)
6
  const [childAge, setChildAge] = useState(0)
7

8
  const incrementParentAge = () => {
9
    setParentAge(parentAge + 1)
10
  }
11

12
  const incrementChildAge = () => {
13
    setChildAge(childAge + 1)
14
  }
15

16
  console.log('🧑부모 컴포넌트가 렌더링이 되었어요.')
17

18
  return (
19
    <div style={{ border: '2px solid orange', padding: '10px' }}>
20
      <h1>🧑부모</h1>
21
      <p>age: {parentAge}</p>
22
      <button onClick={incrementParentAge}>부모 나이 증가</button>
23
      <button onClick={incrementChildAge}>자녀 나이 증가</button>
24
      <Child name={'홍길동'} age={childAge} />
25
    </div>
26
  )
27
}

1
import React, { memo } from 'react'
2

3
function Child({ name, age }) {
4
  console.log('👶자녀  컴포넌트가 렌더링이 되었어요.')
5

6
  return (
7
    <div style={{ border: '2px solid powderblue', padding: '10px' }}>
8
      <h3>👶자녀</h3>
9
      <p>name: {name}</p>
10
      <p>age: {age}</p>
11
    </div>
12
  )
13
}
14

15
export default memo(Child) // React.memo 사용법 : 최적화하려는 컴포넌트 memo()로 감싸주기
16
// memo() : react에서 제공하는 고차 컴포넌트
17
// - 컴포넌트를 인자로 받아, props체크하는 최적화된 컴포넌트를 반환

1
import React, { memo } from 'react'
2

3
function Child({ name }) {
4
  console.log('👶자녀  컴포넌트가 렌더링이 되었어요.')
5

6
  return (
7
    <div style={{ border: '2px solid powderblue', padding: '10px' }}>
8
      <h3>👶자녀</h3>
9
      <p>성: {name.lastName}</p>
10
      <p>이름: {name.firstName}</p>
11
    </div>
12
  )
13
}
14

15
export default memo(Child)

1
import { useState } from 'react'
2
import Child from './Child'
3

4
export default function App() {
5
  const [parentAge, setParentAge] = useState(0)
6

7
  const incrementParentAge = () => {
8
    setParentAge(parentAge + 1)
9
  }
10

11
  console.log('🧑부모 컴포넌트가 렌더링이 되었어요.')
12

13
  // JS에서 오브젝트는 참조형 데이터로 메모리의 주소를 가리키고 있다.
14
  // 함수안의 모든 변수는 렌더링될 떄, 초기화됨
15
  // 그래서 name이라는 변수는 새로운 메모리 주소를 가리키고 있음
16
  // Child 컴포넌트는 name이라는 변수가 새로운 메모리 주소를 가리키고 있기 때문에
17
  // React.memo입장에서는 name이라는 변수가 변경되었다고 판단하고 렌더링을 한다.
18
  const name = {
19
    lastName: '홍',
20
    firstName: '길동',
21
  }
22

23
  return (
24
    <div style={{ border: '2px solid orange', padding: '10px' }}>
25
      <h1>🧑부모</h1>
26
      <p>age: {parentAge}</p>
27
      <button onClick={incrementParentAge}>부모 나이 증가</button>
28
      <Child name={name} />
29
    </div>
30
  )
31
}

1
import { useMemo, useState } from 'react'
2
import Child from './Child'
3

4
export default function App() {
5
  const [parentAge, setParentAge] = useState(0)
6

7
  const incrementParentAge = () => {
8
    setParentAge(parentAge + 1)
9
  }
10

11
  console.log('🧑부모 컴포넌트가 렌더링이 되었어요.')
12

13
  // useMemo를 사용하면, name이라는 변수가 새로운 메모리 주소를 가리키고 있어도
14
  // name이라는 변수의 값이 같다면, React.memo는 name이라는 변수가 변경되지 않았다고 판단 후 렌더링을 하지 않는다.
15
  // 즉, React.memo는 name이라는 변수가 변경되었는지를 판단하는 것이 아니라,
16
  // name이라는 변수가 가리키고 있는 메모리 주소가 변경되었는지를 판단한다.
17
  // 그래서 name이라는 변수가 가리키고 있는 메모리 주소가 변경되지 않았다면, React.memo는 렌더링을 하지 않는다.
18
  const name = useMemo(() => {
19
    return {
20
      lastName: '홍',
21
      firstName: '길동',
22
    }
23
  }, [])
24

25
  return (
26
    <div style={{ border: '2px solid orange', padding: '10px' }}>
27
      <h1>🧑부모</h1>
28
      <p>age: {parentAge}</p>
29
      <button onClick={incrementParentAge}>부모 나이 증가</button>
30
      <Child name={name} />
31
    </div>
32
  )
33
}

1
import React, { memo } from 'react'
2

3
function Child({ name, tellMe }) {
4
  console.log('👶자녀  컴포넌트가 렌더링이 되었어요.')
5

6
  return (
7
    <div style={{ border: '2px solid powderblue', padding: '10px' }}>
8
      <h3>👶자녀</h3>
9
      <p>이름: {name}</p>
10
      <button onClick={tellMe}>엄마 나 사랑해?</button>
11
    </div>
12
  )
13
}
14

15
export default memo(Child)

1
import { useState } from 'react'
2
import Child from './Child'
3

4
export default function App() {
5
  const [parentAge, setParentAge] = useState(0)
6

7
  const incrementParentAge = () => {
8
    setParentAge(parentAge + 1)
9
  }
10

11
  console.log('🧑부모 컴포넌트가 렌더링이 되었어요.')
12

13
  // 부모 컴포넌트가 렌더링이 되면 자식 컴포넌트도 렌더링이 되는데,
14
  // JS에서 함수는 객체의 한 종류입니다.
15
  // 마찬가지로 tellMe()는 객체이기 때문에 메모리 주소가 들어있습니다.
16
  // 그래서 컴포넌트가 렌더링될 떄마다, 자식 컴포넌트로 tellMe()를 다른 메모리 주소가 전달됩니다.
17
  const tellMe = () => {
18
    console.log('길동아 사랑해')
19
  }
20

21
  return (
22
    <div style={{ border: '2px solid orange', padding: '10px' }}>
23
      <h1>🧑부모</h1>
24
      <p>age: {parentAge}</p>
25
      <button onClick={incrementParentAge}>부모 나이 증가</button>
26
      <Child name={'홍길동'} tellMe={tellMe} />
27
    </div>
28
  )
29
}

1
import { useCallback, useState } from 'react'
2
import Child from './Child'
3

4
export default function App() {
5
  const [parentAge, setParentAge] = useState(0)
6

7
  const incrementParentAge = () => {
8
    setParentAge(parentAge + 1)
9
  }
10

11
  console.log('🧑부모 컴포넌트가 렌더링이 되었어요.')
12

13
  // useCallback을 사용하면 자식 컴포넌트가 렌더링이 되지 않는다.
14
  const tellMe = useCallback(() => {
15
    console.log('길동아 사랑해')
16
  }, [])
17

18
  return (
19
    <div style={{ border: '2px solid orange', padding: '10px' }}>
20
      <h1>🧑부모</h1>
21
      <p>age: {parentAge}</p>
22
      <button onClick={incrementParentAge}>부모 나이 증가</button>
23
      <Child name={'홍길동'} tellMe={tellMe} />
24
    </div>
25
  )
26
}

1
import { useState } from 'react'
2

3
export default function App() {
4
  const [inputValue, setInputValue] = useState('')
5

6
  const handleChange = e => {
7
    setInputValue(e.target.value)
8
  }
9

10
  const handleSubmit = e => {
11
    alert(inputValue)
12
    setInputValue('')
13
  }
14

15
  return (
16
    <>
17
      <h1>useInput</h1>
18
      <input type="text" value={inputValue} onChange={handleChange} />
19
      <button onClick={handleSubmit}>확인</button>
20
    </>
21
  )
22
}

1
import { useState } from 'react'
2

3
export default function useInput(initialValue, submitAction) {
4
  const [inputValue, setInputValue] = useState(initialValue)
5

6
  const handleChange = e => {
7
    setInputValue(e.target.value)
8
  }
9

10
  const handleSubmit = () => {
11
    setInputValue('')
12
    submitAction(inputValue)
13
  }
14

15
  return [inputValue, handleChange, handleSubmit]
16
}

1
import useInput from './hooks/useInput'
2

3
function displayMessage(message) {
4
  alert(message)
5
}
6

7
export default function App() {
8
  const [inputValue, handleChange, handleSubmit] = useInput('', displayMessage)
9

10
  return (
11
    <>
12
      <h1>useInput</h1>
13
      <input type="text" value={inputValue} onChange={handleChange} />
14
      <button onClick={handleSubmit}>확인</button>
15
    </>
16
  )
17
}

1
import { useEffect, useState } from 'react'
2

3
// 더미 데이터 반환해주는 API - jsonplaceholder
4
const baseURL = 'https://jsonplaceholder.typicode.com'
5

6
export default function App() {
7
  const [data, setData] = useState(null)
8

9
  const fetchUrl = type => {
10
    fetch(baseURL + '/' + type)
11
      .then(res => res.json())
12
      .then(res => setData(res))
13
  }
14

15
  useEffect(() => {
16
    fetchUrl('users')
17
  }, [])
18

19
  return (
20
    <>
21
      <h1>useFetch</h1>
22
      <button onClick={() => fetchUrl('users')}>Users</button>
23
      <button onClick={() => fetchUrl('Posts')}>Posts</button>
24
      <button onClick={() => fetchUrl('Todos')}>Todos</button>
25
      <pre>{JSON.stringify(data, null, 2)}</pre>
26
    </>
27
  )
28
}

1
import { useEffect, useState } from 'react'
2

3
export default function useFetch(baseURL, initialType) {
4
  const [data, setData] = useState(null)
5

6
  const fetchUrl = type => {
7
    fetch(baseURL + '/' + type)
8
      .then(res => res.json())
9
      .then(res => setData(res))
10
  }
11

12
  useEffect(() => {
13
    fetchUrl(initialType)
14
  }, [])
15

16
  return {
17
    data,
18
    fetchUrl,
19
  }
20
}

1
import useFetch from './hooks/useFetch'
2

3
// 더미 데이터 반환해주는 API - jsonplaceholder
4
const baseURL = 'https://jsonplaceholder.typicode.com'
5

6
export default function App() {
7
  const { data: userData } = useFetch(baseURL, 'users')
8
  const { data: postData } = useFetch(baseURL, 'posts')
9

10
  return (
11
    <>
12
      <h1>User</h1>
13
      {userData && <pre>{JSON.stringify(userData[0], null, 2)}</pre>}
14
      <h1>Post</h1>
15
      {postData && <pre>{JSON.stringify(postData[0], null, 2)}</pre>}
16
    </>
17
  )
18
}