항해99 3주차 WIL - CRA, styled-components, 라우터, 리덕스 + 리렌더링 조건

728x90

처음부터 패키지들이 모두 설치가 되어 있다면 좋을텐데, 리액트는 편하지만 아주 번거롭게도 계속 패키지 설치를 해주어야 한다. 내가 어떤 패키지를 사용할건지 익히면 그 패키지 설치를 반드시 해야한다는 것을 까먹지 않아야 하는데, 이제 막 배우고 시작하는 단계에서 패키지 설치를 까먹기도 하고 사용하는 순서가 헷갈리기도 해서 곤란하다 ㅠㅠ

많이 연습하다보면 늘거라고 믿으면서!!

손코딩 잊지 않기! 위축되지 않고 계속 연습하다보면 늘거라고 믿는다

❤️ 이번 주 잘한 일!!

언어 스터디 팀을 구성했다🤗

나는 리액트를 주특기로 하고 있는데, 팀원 구성은 나와 리액트 한 분, 나머지 세 분은 스프링 주특기이다! O.O ;;

항해를 하면서 슬펐던 건, 나랑 같이 팀 프로젝트를 했던 분들이 거의 대부분 나가서 지금 몇 사람 남지 않았다는 건데,,,(내가 데스노트인가?) ㅠㅠ

다행히 사전프로젝트를 같이 했던 팀원들은 한 분빼고 다 살아 계셔서 심적 안정감이 드는데! 그 분들과 그 분들의 조원 한분을 합쳐 언어 공부 스터디가 탄생했다ㅎㅎ

리액트 분들 중엔 경력이 있으신 분, 공부를 1년 이상 하고 오신 분 등등 나보다 실력자인 분들이 많이 있으셔서 오히려 나처럼 노베이스인 스프링 분들과 하는게 나름 재밌고 뿌듯하기도 하다! 성향도 잘 맞는다.

누군가 항해를 시작한다면, 이렇게 스터디를 별도로 구성해서 공부하는 걸 추천한다. 게더에 영상을 하루종일 틀어놔도 졸린건 졸린거다....ㅜㅜ

❤️ 생활코딩 자바스크립트 언어 강의를 결제했다!

사실,, 항해에 400만원을 투자했는데 언어 강의를 또 결제해야 하는게 엄청난 슬픔이었다.

항해엔 자바스크립트 기초1주차 강의가 끝이라, 그 외엔 별도로 공부하는게 좋다고 하는데 나처럼 기본적인 개념도 없는 사람에겐 어느정도 강의가 필요하다고 생각했다.

코드는 구글링하는게 맞지만, 기본적인 개념은 필요하지 않을까..? 해서 결제하게 된 생활코딩 자바스크립트 강의!

정말정말~~ 기초적이고 정말~~ 내가 아는 내용이 95%를 차지한다.

그럼에도 불구하고 잘했다고 생각하는 건, 코딩을 하면서 자바스크립트를 많이 배워가고 있으나, 중간중간 빈 느낌이 있었다. 완벽한 개념을 알지 못하지만 사용 방법을 알아서 쓰는 느낌?

생활코딩 강의를 통해 기초부터 탄탄하게 하고 가는 느낌이다.

매니저님께도 말씀드렸는데, 마치 파닉스 처음부터 공부하는 기분? ㅎㅎ

A가 코딩하면서 ㅏ라는 발음이 있다는 걸 알았다면, 생활코딩 공부하면서 다른 발음도 있다는 걸 알게 된 기분이다.

지금은 진짜 기초강의다. 만약 누군가 내 WIL 보고 시작한다면, 이렇게 기초부터 시작하지는 않아도 된다고 알려주고 싶다. 하지만 난 기초부터 꾸준히 할 생각이기 떄문에(목표...제발..포기 하지마!!) 후회하지 않는다!

스터디 구성 너무 좋아🤗 계속가자 스터디🤗 나가지마요 스터디🤗

✅ 설치해야 하는 패키지

1. yarn add create react-app "폴더명"

2. yarn add styled-components

3. yarn add react-router-dom

4. yarn add redux react-redux

✅ 리덕스 절차

1️⃣ 폴더구조부터 만들기

2️⃣ configStore에 아래 코드 넣기

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;

3️⃣ index.js에 아래 코드 넣기

// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어준다.
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4️⃣ 모듈 만들기

✅ State, Props, 리렌더링 발생 조건

1️⃣ 대표적인 3가지 리렌더링 조건

👌 State 변경

State 업데이트가 일어나면 리렌더링을 한다.

리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다. 리액트는 변화를 바로 바로 감지하여 화면에 변경사항을 보여주기 때문이다.

👌 Props 변경

Props 업데이트가 일어나면 리렌더링을 한다. Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다. 부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고 모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

👌 부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.

Props와 같은 원리이다.

👌 결론

리렌더링 조건을 생각하며 로직을 최적화하자

리렌더링 참고 출처 : https://tooo1.tistory.com/580