TIL 7주 4일차

페이지 여러개 만들고 싶으면 : URL파라미터 사용

유저가 URL파라미터에 입력한거 가져오려면 useParams()

(참고) URL 파라미터 만들 때 - 여러 개 가능

<Route path="/detail/:id" element={

 

---

import { useParams } from "react-router-dom";

---

let {id} = useParams();

 

---

[styled-components]

장점1. css파일 안 열어도 됨

장점2. 스타일이 다른 js파일로 오염되지 않음

장점3. 페이지 로딩시간 단축

단점1. js파일 매우 복잡해짐

단점2. 중복스타일은 컴포넌트간 import할텐데 CSS와 별 차이 없음

단점3. 협업시 CSS 담당의 숙련도 이슈

 

let YellowBtn = styled.button`

  background: yellow;

  color : black;

  padding : 10px;

`

let Box = styled.div`

  background : grey;

  padding : 20px;

`

오염 방지하려면 컴포넌트.module.css

props로 컴포넌트 재활용가능

->

let YellowBtn = styled.button`

  background: ${ props => props.bg };

  color : black;

  padding : 10px;

`

<YellowBtn bg="blue">버튼</YellowBtn>

<YellowBtn bg="orange">버튼</YellowBtn>

참고1) 간단한 프로그래밍 가능

참고2) 기존 스타일 복사가

let YellowBtn = styled.button`

  background: ${ props => props.bg };

  color : ${ props => props.bg == 'blue' ? 'white' : 'black'};

  padding : 10px;

`

let NewBtn = styled.button(YellowBtn)`

`

---

[Lifecycle과 useEffect]   // useEffect -> hook

컴포넌트의 라이프사이클 : --> 중간중간 코드실행가능

페이지에 장착되기도 하고(mount)

가끔 업데이트도 되고(update)

필요없으면 제거되고(unmount)

 

컴포넌트에 갈고리 다는 법

 

import { useEffect } from "react";

function Detailpage(props) {

  useEffect(()=>{

    //mount, update시 여기 코드 실행됨

  })

mount, update시 코드 실행해주는 useEffect

 

useEffect 쓰는 이유 :

useEffect 안에 있는 코드는 html 렌더링 후에 동작한다.

useEffect 안에 있는 코드들은

-> 어려운 연산, 서버에서 데이터가져오는 작업, 타이머 장착하는거 / Side Effect 코드들 보관함

 

왜 이름이 Effect~일까?

Side Effect : 함수의 핵심기능과 상관없는 부가기능

 

---

useEffect에 넣을 수 있는 실행조건 [ ] -> dependency

 

useEffect에 넣을 수 있는 실행조건 

 

useEffect(()=>{ 실행할코드 }, [count])

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데

거기에 변수나 state같은 것들을 넣을 수 있습니다.

그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줍니다.

그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행되겠군요. 

(참고) [ ] 안에 state 여러개 넣을 수 있음

 

 

useEffect(()=>{ 실행할코드 }, [])

아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않습니다.

 

 

---

[Redux]

 

Redux 사용하면 컴포넌트들이 props 없이 state 공유 가능