[KossieCoder] [React Basic Lecture 11-22]

이전 글: 2022.03.07 - [React/일반] - [KossieCoder] [React Basic Lecture]

---

목차 

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 페이지

---

11 컴포넌트와 props 데이터 보내기 복습

GitLink: https://github.com/Harimad/KossieCoder/commit/4465f443e50788fe3eab4795f09ea7cec1dc91cc

---

1. 부모컴포넌트에서 자식컴포넌트로 data값을 넘겨주고 자식컴포넌트에서 data값을 사용한다.

2. 자식컴포넌트에서 export하면 부모컴포넌트에서 import해온다.

3. 부모컴포넌트에서 자식컴포넌트를 사용한다.

 

실행결과

 

 

12 영화 리스트 추가 폼 만들기 1

Git Link: https://github.com/Harimad/KossieCoder/commit/0955f01e380d6f6f0d763d68f317dc3f6829a855

 

---

1. input값에 값을 넣으면 movieTItle, movieYear의 state에 값이 저장된다.

2. 버튼을 눌러서 onSubmit 함수가 실행되면, setMovies함수가 호출되면서 movies값이 재할당된다.(input값 추가)

3. movies값이 바뀌면서 컴포넌트가 리랜더링되므로, renderMovies변수의 map함수가 재실행된다.

4. map함수가 재실행되면 Movie컴포넌트도 리랜더링되면서 실행화면에 Movie List가 추가된다.

코드 동작원리

 

실행결과

Input값에 영화정보를 넣으면 새로운 영화 정보리스트를 생성함

 

 

13 영화 리스트 추가 폼 만들기 2

 

구조분해할당 참고: https://ko.javascript.info/destructuring-assignment

구조 분해 할당

 

 

14 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기

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

---

1. 부모컴포넌트에서 data를 추가하는 함수를 자식컴포넌트에 전달해준다

2. 자식컴포넌트에서 인자로 받아온 함수를 사용하고 인자로 전달할 값을 넣어준다.

3. 자식컴포넌트에서 함수를 사용하면 부모컴포넌트에서는 data가 하나씩 추가된다.

4. 부모컴포넌트에서 renderMovies함수가 리랜더링되면서 <Movie>컴포넌트를 하나 더 생성해준다.

 

15 영화 삭제하기

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

---

동작 순서

 

부모컴포넌트(App.js)
1. movies state를 비운다 -> const [movies, setMovies] = useState([])
2. addMovie 함수를 만들고 MovieForm컴포넌트에 넘겨준다.
3. removeMovie 함수를 만들고 Movie컴포넌트에 넘겨준다.

자식컴포넌트(MovieForm.js)
2-1. onSubmit함수가 호출되면 addMovie함수에 인자(id, movieTitle, movieYear)를 넣어서 호출한다.
2-2. 부모컴포넌트에서 movies의 데이터가 추가된다.
2-3. 리랜더링 되면서 Moive컴포넌트를 새로 화면에 만듦

자식컴포넌트(Movie.js)
3-1. button을 클릭하면 removeMovie함수에 id값을 인자로 넣어서 호출 되도록한다.
3-2. 부모컴포넌트에서 movies데이터에서 id값을 filter함수에 의해서 삭제한다.
3-3. 리랜더링 되면서 Moive컴포넌트를 새로 화면에 만듦

 

실행화면

3개 추가

가운데 데이터 삭제

 

16 영화 폼 validation

Git Link: https://github.com/Harimad/KossieCoder/commit/89006da713700e41c7cf5a227123a59de70acd94

---

동작원리

자식컴포넌트(MovieForm.js)

1. titleError, yearError state 생성
2. validateForm 함수생성
2-1. flag변수를 만들고 true로 초기화한다.
2-2. movieTitle나 movieYear가 비어있으면, titleError나 yearError에 에러메시지를 넣어주고 flag에 false 를 할당한다.
2-3. flag변수(T / F)를 리턴한다

3. onSubmit 함수가 호출될때 validateForm함수가 T이면 addMovie함수를 실행한다.

4. return 안에 <div>{titleError}</div>, <div>{yearError}</div> 를 만든다.
4-1. titleError yearError변수가 에러미시지 값이 있으면 화면에 보여주고 없으면 안보여준다.

 

 

 

17 InputField 컴포넌트로 빼내기 & Fragment

 

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

---

InputField컴포넌트를 만들고
 MovieForm컴포넌트에서 가져다씀
원하는 인자값을 넣어서 재사용성을 높임.

 

 

18 React router 설치하기

Git Link: https://github.com/Harimad/KossieCoder/commit/99c7d0b2f290f338d888ee09c0c9c163ee6fae5c

---

 

20 react router 적용하기

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

---

React-router-dom 참고: https://reactrouter.com/docs/en/v6/getting-started/tutorial

React Router | Tutorial

---

1. 부모 컴포넌트(App.js)에서 아래를 import 한다.

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

2.. 부모 컴포넌트의 return 자리에 아래와 같이 코드를 구성한다.

//App.js
return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch> // 한 페이지만 보여줌
          <Route path="/movies">
            <h1>Movie List</h1>
            <MovieForm addMovie={addMovie} />
            {renderMovies}
          </Route>
          <Route path="/" exact> // 정확히 path와 일치해야 실행
            <h1>Home</h1>
          </Route>
          <Route path="/users">
            <h1>Users</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  )

3. 자식컴포넌트(Navbar.js)에서 Link를 import한다.

import { Link } from 'react-router-dom';

4. 자식컴포넌트에서 a 태그 부분을 Link로 바꾸고 href를 to로 바꿔준다.

<Link class="navbar-brand" to="/">Home</Link>
<Link class="nav-link" to="/movies">Movies</Link>
<Link class="nav-link" to="/users">Users</Link>

 

21 React router 작동 원리 알아보기

---

참고: https://it-eldorado.tistory.com/113

[React] react-router 동작 원리 간단히 알아보기

 

22 NavLink 사용하기

Git Link: https://github.com/Harimad/KossieCoder/commit/17cd0609b2af8ab0a3e5d308904b53c8151f2153

---

<navLink> : https://devdocs.io/react_router/index#navlink

DevDocs

A <NavLink> is a special kind of <Link> that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected.

---

 

1. Navbar.js 컴포넌트에서 아래를  import한다.

2 <NavLink> 컴포넌트를 써서 네비게이션 메뉴가 눌러졌을때 active 클래스를 붙여준다.

import { Link, NavLink } from 'react-router-dom';

<NavLink className="nav-link" to="/movies" activeClassName="active">
    Movies
</NavLink>

<NavLink className="nav-link" to="/users" activeClassName="active">
    Users
</NavLink>

---

Q. 함수를 선언하실 때 function 키워드가 아닌 const를 사용하시는 이유가 있을까요?

 

일단 개인적으로 화살표 함수를 선호하기도 하고 리액트 커뮤니티에서도 화살표 함수를 써요~

화살표 함수를 변수에 담는거죠 근데 함수가 변할리가 없으니깐 const 변수에 담습니다.

 

화살표 함수를 쓰면 좀더 코드가 심플해져요. return 생략도 가능하고.

일반 function과 화살표 함수는 거의 비슷한데 this를 function은 bind를 해줘야 하지만

화살표 함수는 컴포넌트 this를 바로 쓸수 있다는 정도가 있습니다.

 

class 컴포넌트에서는 this 키워드가 많이 사용되는데

hooks에서는 다 function 컴포넌트라 this가 쓰이는 경우가 없어서

function이나 화살표 함수나 둘중 아무거나 써도 상관없을 것 같아요~