[KossieCoder] [React Basic Lecture 1-10]

Lecture Link : https://www.youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX

---

목차 

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

---

01 리액트 설치하기

리액트 실행을 위한 버전 확인

node -v

npm -v

 

폴더생성

npx create-react-app react-basic

 

앱실행

npm run

 

앱 확인

localhost:3000

 

02 폴더구조 & 컴포넌트 소개

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

Git Link2: https://github.com/Harimad/KossieCoder/commit/a2e2b42699293d5fd0ad89b1d60f3f1314a87d4f

---

Create-React-App 파일 구성 & 동작 과정

 

https://ko.reactjs.org/docs/react-dom.html#gatsby-focus-wrapper

ReactDOM – React

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

03 이벤트 핸들링 (onClick & onKeyUp)

Git Link: https://github.com/Harimad/KossieCoder/commit/2819e634ffd8b524f163933530e1c5e07df94794

---

https://ko.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

 

04 리액트 훅스 useState

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다.

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다

 

- useState

import React, { useState } from 'react'

function App() {
  const [text, setText] = useState('TimLee')
  
  const updateText = () => {
    setText('New TimLee')
    console.log(text) //button을 Click하면 이 함수 실행되어 'New TimLee'가 출력 되어야한다
  }

  return (
    <div className="App">
      <span></span>
      <button onClick={updateText}>Update</button>
    </div>
  )
}

export default App

하지만 'New TimLee' 가 출력이 안되고 'TimLee'가 여전히 출력된다.

이것에 대한 해결책은 useEffect를 쓰면된다. 사용법은 추후에 나올것이다.

 

 

Hook의 개요 – React

 

 

05 폼에서 useState 사용하기

Git Link: https://github.com/Harimad/KossieCoder/commit/85d50483ca01fd2e24576097868756576e8790f1

---

코드 설명

1.  useState로 username과 password 변수를 만듦

2. onSubmit 함수를 만듦

3. return 에 form 태그안에 input input button 만듦

 3-1. input에는 각각 onChange 함수를 넣음

4. 아래 처럼 input에 값을 넣고 Enter를 하거나 Login을 Click하면 onSubmit 함수가 실행됨

5. onSubmit함수가 실행되면 username과 password 의 state가 변경됨

실행결과

 

---

Q. input, button tag만 써도 잘 작동이 되는데, 왜 굳이 form tag로 다시 감싸는가?
-> tag가 자체가 이 부분은 form이라는것을 알려주고 
input 안에서 enter를 누르면 submit이 되는 작은 장점도 있다

Q. form 태그 안에서 useState를 사용하는 이유??
-> 인풋안의 값을 스테이트로 관리하기 위함
화면에 나타나고 변하는 값은 useState 쓰면됨

Q. input안의 onChange함수 작동원리?
-> 글자를 입력할때마다 setUsername 함수를 통해서 username state를 업데이트 해줌
state가 변경 될때마다 그 컴포넌트가 리렌더링됨

 

 

06 useEffect 사용하기

GItLink: https://github.com/Harimad/KossieCoder/commit/6385b4a5e3068d1f4904ef6d4fc7c2a5ecc08a88

---

useEffect는 컴포넌트가 랜더링된 이후에 실행되는 함수이다.

useEffect는 무조건 컴포넌트가 랜더링되고 한번은 실행된다.

 

두 번째 인자가 비어있으면, 컴포넌트가 리랜더링될때마다 콜백함수가 실행된다.
두 번째 인자가 []만 있으면, 컴포넌트가 처음 랜더링되고 한번만 콜백함수가 실행된다.
두 번째 인자가 [count] 같이 state변수가 들어가면, 그 state변수 값만 바뀔때만 콜백함수가 실행된다.

---

Using the Effect Hook – React

 

07 컴포넌트로 반복 제거

GitLink: https://github.com/Harimad/KossieCoder/commit/aff21c72a0245a75e853f4da2be572ad9056a19f

---

App.js 파일에서 button 컴포넌트를 3개 일일이 만들어주는 것보다

Btn.js 파일을 만들고 그 안에 Btn 컴포넌트를 만들어서 App파일에서 가져다 쓰는 방식이 훨씬 편한 방법이다.

 

 

 

08 자식 컴포넌트에 데이터 보내기 Props!

GitLink: https://github.com/Harimad/KossieCoder/commit/6e250d169623c929f415104575a0a31b5588435e

---

부모컴포넌트에서 자식컴포넌트 안에 전달할 값을 넣는다. useState값을 전달해도 된다.

자식컴포넌트에서는 인자로 props를 받아서 객체의 프로퍼티를 꺼내쓰듯이 쓰면된다. (예, props.click)

 

 

부모컴포넌트인 App.js 파일

자식 컴포넌트인 btnCounter.js 파일

---

Q. 본문 내용 중 자식컴포넌트를 생성하는 부분 <BtnCounter /> 안에는 onClick을 넣을 수 없나요?

실제 실행해보니 안되서 다른 방법이 있나 궁금합니다. ex.)<BtnCounter onClick={() => {setBtnName('클릭3')}}/>

 

-> 컴포넌트에는 onClick 안되요. 위처럼 싶으면 BtnCounter 컴포넌트에서 onClick을 props로 받아서 처리해야합니다.

 

 

09 조건 렌더링

condition 값을 조건연산자로 renderCondition 변수에 담는다.

renderCondition 변수를 return 자리에 삽입하면 button이 눌릴때마다 보이는 값이 달리진다.

 

실행결과

---

 

조건부 렌더링 – React

 

 

10 리액트 반복문

GitLink: https://github.com/Harimad/KossieCoder/commit/cf0a4c6080fa37387825cb1d8f60d32dd1c0377f

---

map함수로 movies 배열의 값에 따라 renderMovies에 새 배열로 찍어냄

실행결과

---

리스트와 Key – React

---

Q. map대신 forEach를 사용해도 무관한가?

-> No, map을 써야한다.