React 기초반 강의내용 정리 (1-3주차)

음..1주차 강의자료 ..전부 정리하고 있었는데

임시저장 안해서 다 날라갔다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

젠장.

그냥 강의자료로 보자 !!! 다시 작성하기엔 ... ;;;;

 

1주차 강의자료 링크 Click👻 🤩

[스파르타코딩클럽] 리액트 기초반 - 1주차

아....정말 ~~~~

다 날라가버려서 ...화딱지가 나지만. . . 고고..

 

1. JSX 란?

 

👉 그럼 리액트에서 어떻게 뷰를 그릴까요?

App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

👉 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)

JSX 문법이란? html을 품은 자바스크립트다. DOM요소 처럼 보이는 녀석들은 React요소다 ~!

 

 

2. JSX 규칙

 

1. 태그 꼭 닫기

2. 무조건 1개의 엘리먼트  반환하기 (null도 ok)

3. JSX에서 javascript 값을 가져오려면? 중괄호를 쓴다! 

값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

return 안에는 if문 사용 못함 👉  삼항 연산자를 사용하면 된다.

4. class 대신 className!

5. 인라인으로 style주기  👉  style={{color: "orange", fontSize:"20px"}}

 

 

3 .라이프 사이클이란 ?

 

-가상돔이란 ?

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? →

필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔!

가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다.

가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줍니다! → 돔 업데이트 처리가 정말 간결하죠!

 

그럼 어떤 행동을 해야 DOM을 새로 그릴까요?

- 처음 페이지 진입했을 때도 그리겠죠!

- 데이터가 변했을 때도 그릴 겁니다!

-라이프 사이클이란 ?

컴포넌트의 라이프 사이클(= 컴포넌트 생명주기)은 정말 중요한 개념입니다! 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이에요. 공식 문서에서도 자세히 다루고 있어요.

 

아래 도표는 어떻게 라이프 사이클이 흘러가는 지 그린 도표입니다. (도표 보러가기)

 

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라집니다.
• 생성은 처음으로 컴포넌트를 불러오는 단계입니다.
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됩니다. 아래의 경우죠!
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.

⭐️ 알아야될 것 ⭐️ 

1. 가상돔이 먼저 업데이트 되고, 그 다음에 바뀐 부분만 찾아서 진짜돔에 업데이트 한다 !
2. 라이프 사이클에서 컴포넌트는 크게 생성되고 수정되고 제거된다.
3. 수정되는 경우(컴포넌트가 업데이트 될 때)는

     ⚡️ 내 데이터가 바뀌었을 때 즉 컴포넌트 자신의 데이터 state가 바뀌었을 때

     ⚡️ 부모가 나한테 주는 데이터 props가 바뀔 때
     ⚡️  부모가 리렌더링 되었을 때
     ⚡️  강제 업데이트를 일으켰을 때

 

4 . 리액트 yarn 으로 새 프젝 만들기

yarn create react-app lifecycle

터미널 창에 위의 코드 입력 ! lifecycle은 폴더명이어서 그냥 내가 원하는대로 수정해도 됨.

 

5 . Component

 

Component는 클래스형과 함수형이 있다. 클래스보다는 함수형을 써라 !

이제 클래스형 컴포넌트는 잘 쓰지 않지만, 이미 기개발된 프로젝트들은 클래스형 컴포넌트를 사용 중 일 수도 있다.

최소한 코드를 알아보고 고칠 수 있을 정도로만 알아두면 된다 !

 

리액트는 레고 컴포넌트는 블록

컴포넌트를 이해하고 잘 써먹으려면 웹사이트를 잘 조각낼 줄 알아야 된다.

컴포넌트는 웹 사이트의 조각이고 우리는 이 조각을 모아서 웹사이트에 뿌려준다.

 

-state : 컴포넌트가 가지고 있는 데이터다. (내가 가지고 있는 데이터) -> 변경할 수 있다.

-props : 부모 컴포넌트로부터 받아온 데이터다. -> 변경할 수 없다. 부모꺼니까 ~~~~

 

6. 함수형 컴포넌트 만들기

 

우선 새 프젝을 만들어야되기 때문에 터미널창에 아래 코드를 적어준다. 이제 좀..외우자 !!

만약 폴더 밖을 나가려면 cd ..사용하기 ^^;

yarn create react-app bucket_list

 

buket_list 라는 폴더를 만들어준다.

만약 이전 프젝이 열려있다면 control + c 로 꺼준다 !

 

폴더명은 소문자를 이용하고,

js파일은 카멜표기법으로 이름을 지정해줘야된다.

BucketList.js처럼 !!

기억하자 !!!! 

 

 

리액트 기초반 2주차 강의자료 링크 click 🤩

[스파르타코딩클럽] 리액트 기초반 - 2주차

7. 클래스형 Component

 

음 강의를 들으면서 따라서 코드를 적어봤는데 아직까지 모르겠다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그럴 수 있다. 처음이니 당연히 익숙하지 않은거지 !!

this에 대해 강의자료에서 정의해주었다. 🧚‍♀️👇

🧚‍♀️ 알면 덜 찜찜해지는, 몰라도 되는 이야기 : this 키워드는 깊이 들어가면 context 객체라고 부르는 친구와 연관이 있어요. 우리는 함수나 클래스 안에서 사용하면 this를 쓴 위치(위의 경우에는 App 클래스)에 있는 값을 가지고 온다고 생각합시다. ex) App 클래스 안에서 쓰면, this.[변수명]은 App 클래스 안에 있는 값을 가지고 옵니다.

 

8. 서버 키고 끄는 법

 

control + c => 서버 꺼짐

yarn start => 서버 켜짐

 

 

9. styled-components 패키지 설치

 

주의사항 !! 프로젝트 경로 안에서 설치를 해야된다.

터미널에서 우클릭 > 터미너 분할 > control + c로  프로젝트 종료 > 

yarn add styled-components

위 코드 터미널에 입력 > 프젝 폴더안에 설치해줘야됨. cd [원하는 폴더명]으로 들어가서 설치

 

styled-components란 ? 

1. class 이름짓기에서 해방된다.

2. 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적이다.

컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각해도 된다.

 

코드힌트도 안나오길래 나는 vsc 설정 > 확장 클릭해서 vscode-styled-components를 설치해주었다!

그랬더니 코드힌트 나온다 ~~! 굿 !!

styled-components안에서 나자신을 지칭해줄때는 &를 사용한다.

그리고 확장에서 난 민영튜터님이랑 똑같이 패키지를 설치해줬다. 미래의 나에게..전달하는 메세지 👉설치해라 ~

React Extension Pack

 

10. Ref로 돔요소 가져오기

 

ref는 이름표라고 생각하면 좋다.

아직까지 보고 따라치는 거니까... 할 만은 하지만, 내가 생각해서는 못할 수준이다.

• React 요소를 가지고 오는 방법1 : React.createRef()
• React 요소를 가지고 오는 방법2 : React.useRef()

11. State 관리 

 단방향 데이터 흐름 : 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 된다.

왜 ?  생성할때까지는 문제가 되지 않음. 업데이트 할 때에 문제 발생  👉 렌더링 무한루프에 빠진다...

 

그리고 코드 입력하면 단계 단계 단계마다 console.log로 잘 나오는 지 확인하기 !

안그러면 오류찾기 너무 힘들어진다..ㅠㅠ

 

12. Event Listener

 

이제 슬슬 강의를 듣는데 이해하기가 어려워졌다. ㅎㅎ..

 

리액트 기초반 3주차 강의자료  링크 click 🤩

[스파르타코딩클럽] 리액트 기초반 - 3주차

addEventListener 해주면 removeEventListener해주자 !!

 

13. 라우팅

 

내가 아는 웹의 동작방식은 MPA방식이지만, 리액트는 SPA방식이다.

왜 리액트는 페이지 1개만 사용할까 ? 바로 사용성때문이다.

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이라는 말씀 !

MPA방식 단점 : 상태값 유지가 안 된다. 

SPA방식 단점 : 딱 한 번 정적자원을 내려받다보니 처음에 모든 컴포넌트를 받아온다.

즉 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. 컴포넌트가 아주 많다면, 첫 로딩 속도가 느려진다.

 

라우팅이란 ? 

SPA는 주소를 어떻게 옮길 수 있을까 ?

html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 잇다.

이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 부른다.

 

우선 cd 폴더명 한다음에 라우터 패키지 설치 시작 !

yarn add react-router-dom@5.2.1

저 뒤에 골뱅이 빼고 입력했더니 설치 안되는 에러 발생 ㅋㅋ 다영어니까 ㅜㅜ 에러가 나면 겁이 난다. (아직까지는)

 

<라우팅 하는 순서>

 

(1) index.js에 Browser Router 적용하기

(2) 세부 화면 만들기

(3) App.js 에서 Route적용하기

(4) exact 적용하기

function App() {
  return (
    <div className="App">
    <Route path="/" exact>
        <Home />
    </Route>
    <Route path="/cat">
        <Cat />
    </Route>
    <Route path="/dog">
        <Dog />
    </Route>
    </div>
  );
}

🤥 exact를 꼭 붙여야 된다.

 

(5) URL 파라미터 사용하기 (🎃파라미터 : /cat/nabi  🎃쿼리: /cat?name=nabi)

(6) 링크 이동시키기

 

음 보기만해도 벅차다 !!!!

 

(7)잘못된 주소 처리하기 !

NotFound라는 js파일 만들어주기 >App.js에 

import { Route, Switch } from "react-router-dom";
import NotFound from "./NotFound";


<Container>

        <Title>내 버킷리스트</Title>
        <Line />
        {/* 컴포넌트를 넣어줍니다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <Switch>
          <Route
            path="/"
            exact
            render={(props) => (
              <BucketList list={list} />
            )}
          />
          <Route path="/detail" component={Detail} />
          <Route>
            <NotFound />
          </Route>
        </Switch>
</Container>

임포트해오기

import React from "react";

const NotFound =(props) =>{

    return(
        <h1>주소가 올바르지 않아요!!</h1>
    )
};

export default NotFound;

낫파운드..js내용!

 

14. 리덕스

 

[상태관리 흐름도]

딱 4가지만 알면 된다.

Store, Action, Reducer, 그리고 Component!

• (1) 리덕스 Store를 Component에 연결한다. ( store는 데이터가 저장되어있는 공간/ 리듀서는 데이터를 수정해주는 공간?)
• (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
• (3) Reducer를 통해서 새로운 상태 값을 만들고,
• (4) 새 상태값을 Store에 저장한다.
• (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 된다.)

이제 리덕스를 설치한다.

yarn add redux react-redux

리덕스 개념과 용어

 

(1) State

:리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관합니다.

(2) Action

:상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것입니다.

(3) ActionCreator

:액션 생성 함수라고도 부릅니다. 액션을 만들기 위해 사용합니다.

(4) Reducer

:리덕스에 저장된 상태(=데이터)를 변경하는 함수입니다. 우리가 액션 생성 함수를 부르고 → 액션을 만들면 → 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 → 새로운 데이터를 만들고 → 리턴해줍니다.

(5) Store

:우리 프로젝트에 리덕스를 적용하기 위해 만드는 거예요! 스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다.

(6) dispatch

:디스패치는 우리가 앞으로 정말 많이 쓸 스토어의 내장 함수예요! 액션을 발생 시키는 역할을 합니다.

 

액션을 디스패치한다  👉 나 이제 수정을 할 거야 !

 

리덕스 3가지 특징

 

1️⃣ store는 1개만 쓴다.

2️⃣ store의 state는 오직 action으로만 변경할 수 있다.

3️⃣ 어떤 요청이 와도 리듀서는 같은 동작을 해야한다.

 

덕스구조

 

• 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성합니다. (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성합니다.)
• 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성합니다. (버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣는 거예요.)
• 우리는 덕스 구조로 리덕스 모듈을 만들어볼거예요!

👉 [외울 필요❌] 덕스 구조를 잘 설명해 주는 사이트가 있습니다. 😉  사이트 바로가기→

GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

 

 

 

나머지는 따라해보았는데.. 이해가 안간다 !!!아직까지는! 

계속하다보면 되겠지 ~