[KossieCoder] [React Basic Lecture 23-30(end)]

이전 글

2022.03.07 - [React/일반] - [KossieCoder] [React Basic Lecture 1-10]

2022.03.08 - [React/일반] - [KossieCoder] [React Basic Lecture 11-22]

 

목차 

01 리액트 설치하기
02 폴더구조 & 컴포넌트 소개
03 이벤트 핸들링 (onClick & onKeyUp)
04 리액트 훅스 useState
05 폼에서 useState 사용하기
06 useEffect 사용하기
07 컴포넌트로 반복 제거
08 자식 컴포넌트에 데이터 보내기 Props!
09 조건 렌더링
10 리액트 반복문 
11 컴포넌트와 props 데이터 보내기 복습
12 영화 리스트 추가 폼 만들기 1
13 영화 리스트 추가 폼 만들기 2
14 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기
15 영화 삭제 하기
16 영화 폼 validation
17 InputField 컴포넌트로 빼내기 & Fragment
18 React router 설치하기
19 네비게이션 바 만들기
20 react router 적용하기
21 React router 작동 원리 알아보기
22 NavLink 사용하기
23 유저 데이터 받아오기 👈
24 유저 데이터 화면에 출력하기 👈
25 유저 데이터 화면에 출력하기 2 👈
26 로딩 Spinner 추가하기 👈
27 Home/Movies 페이지 컴포넌트 만들기 👈
28 routes 파일 만들기 👈
29 user 페이지 라우트 추가 👈
30 user 페이지 👈

---

 23 유저 데이터 받아오기

Git Link: https://github.com/Harimad/KossieCoder/commit/334ed59e7793d62dd7ba23d3434bbf8831f4f2f1

---

1. App.js 에서 Route부분의 컴포넌트를 pages 폴더에 따로 저장한다.
2. pages폴더의 Users 컴포넌트를 App.js에 import한 후 사용한다.

3. Users 컴포넌트에서 Axios 라이브러리를 import한다.
4. useEffect()로 한 번만 데이터를 받도록 한다.
4-1. Axios.get으로 데이터를 받고 데이터가 정상적으로 받아졌으면 then으로 값을 출력해본다.
4-1-a. Axios.get('사이트').then을하면 fetch함수를 쓸때 response.json()을 한것처럼 자동으로 처리해준다.
 

useEffect(() => {
    Axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      console.log(response)
    })
}, [])

---

JSON dummy Site: https://jsonplaceholder.typicode.com/
React axios 참고사이트: https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API

React | axios란? (feat. Fetch API)

 

24 유저 데이터 화면에 출력하기

Git Link: https://github.com/Harimad/KossieCoder/commit/3e07bb13691dcde17e3486c5674fc97691d044dd

---

1. Users 컴포넌트에서 Axios로 JSON더미값을 받아온다.
2. JSON더미값을 state값에 담는다.
3.  state값을  UserList 컴포넌트에 전달한다.
4. UserList 컴포넌트에서 전달받은 state 값을 map함수를 이용해서 <div></div> Tag를 생성한다.

 

실행화면

25 유저 데이터 화면에 출력하기 2

Git Link: https://github.com/Harimad/KossieCoder/commit/f435a8925a3722847359cfbe818a2c17420b45b2

---

24챕터부분 내용에 이어서 UserList컴포넌트에 bootstrap을 적용시킨다.

// UserList.js
const UserList = ({ users }) => {
  return (
    <div>
      {users.map(user => {
        return (
          <div className="card mb-2" key={user.id}> //bootStrap card 참고
            <div className="card-body p-3">{user.name}</div>
          </div>
        )
      })}
    </div>
  )
}

 

26 로딩 Spinner 추가하기

Git Link: https://github.com/Harimad/KossieCoder/commit/d7afdc29ca4d5ef2418c937576d812b2c7c6c4d5

---

 

동작원리

1. User 컴포넌트에서 Spinner 컴포넌트를 import한다.
1-1. Spinner컴포넌트는  Loading 하는것 처럼 보이게 만드는 기능을 하기 때문에
    Axios.get()로 받은 데이터를 Users넣는 과정 바로 직전에 실행시킨다.

2. spinner 의 T/F state를 담을 변수를 선언하고 true로 초기화한다.
3. Axios.get().then()으로 user 데이터를 다 받으면 spinner를 false로 만든다.
3-1. return에 삼항연산자를 이용해서 
    spinner가 true이면 <Spinner/> 가 보이도록하고 flase이면 <UserList/>가 보이도록 한다

 

27 Home/Movies 페이지 컴포넌트 만들기

Git Link: https://github.com/Harimad/KossieCoder/commit/c387af3ab0170b4d3ecc36517d8f9cc3fec44379

---

동작원리

1. 부모 컴포넌트(App.js)에서 컴포넌트(레고부품)만 import 해서 사용할 수 있도록 만든다.
1-1. 즉, 부모 컴포넌트는 레고 완성체라고 보면 된다.
1-2. 부모 컴포넌트는 Route로 Movies, Home, Users 페이지를 이동할 수 있다.
2. 부모 컴포넌트에 완성된 자식컴포넌트를 배치하는 식으로 하면, 코드의 재사용성이나 유지보수가 쉬워진다.

---

 

지금까지의 파일 작동원리

 

 28 routes 파일 만들기

Git Link: https://github.com/Harimad/KossieCoder/commit/e3595733f35e0c66ca87b8f4e087850133ca83ed

---

부모컴포넌트에서 컴포넌트를 쓸 때 Route부분에 중복되는 부분이 있다.

이걸 줄여줄 방법이 있다.

//App.js - 중복되는 부분 있음
<Route path="/movies">
  <Movies />
</Route>
<Route path="/" exact>
  <Home />
</Route>
<Route path="/users">
  <Users />
</Route>

---

1. route부분을 routes.js 파일에 데이터를 저장해 놓는다.

2. App.js에서 routes파일을 import한다.

3. App.js에서 return 할때 map함수를 사용한다. (더 편리함)

// src/routes.js
import Users from './pages/Users'
import Home from './pages/Home'
import Movies from './pages/Movies'

export default [
  { path: '/', component: Home },
  { path: '/movies', component: Movies },
  { path: '/users', component: Users },
]

//  src/App.js
import routes from './routes'
//....
{
    routes.map(route => {
      return (
        <Route path={route.path} key={route.path} exact>
          <route.component />
        </Route>
      )
    })
}

수정된 파일 작동원리

 

29 user 페이지 라우트 추가

Git Link: https://github.com/Harimad/KossieCoder/commit/06de79586124cc14e800386f8a6a111c1d376566

---

useParams hook은
현재 URL에서 <Route path>와 일치되는 동적 매개변수(params)의 키/값 쌍 개체를 반환한다.
하위 경로는 상위 경로에서 모든 매개 변수를 상속한다.

---

이번챕터 동작원리

1. routes부모컴포넌트에서 path에 /:id를 붙여서 매개변수를 User자식컴포넌트에 넘겨준다.

2. User자식컴포넌트에서 useParams를 import한다.

3. useParams() 함수를 써서 id를 구조분해한뒤 변수 선언을 하고 아래처럼 사용한다.

4. axios.get('https://jsonplaceholder.typicode.com/users/' + id).then(response => {setUser(response.data);

 

30 (마지막) user 페이지

Git Link: https://github.com/Harimad/KossieCoder/commit/43693a010699f463c28102b937a4694147b82748

---

1. UserList.js에서 <Link to={`/users/${user.id}`}>{user.name}</Link>로 User.js컴포넌트로 연결시킴.

 

---

최종 실행 화면

home

Movies

Users

Users에서 요소 클릭

---

Q. 리액트 중급자가 되기 위해서는 앞으로 뭘 해야 하나요?

코지코더曰: 게시판 혼자 만들어보시고 상태관리 툴 (디덕스 툴킷 제일 인기 있음) 필요할때 적절히 사용하줄 알면 좋을거 같아요

그 다음에 타입스크립트 리액트에 적용시키고 react-testing-library 패키지로 유닛테스팅까지 하시면 좋습니다 ^^