TIL - 220629

REACT (2)

[오늘 공부한 내용]

(1) export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능
export 했던 변수명 그대로 적어야함

(2) 서브경로 만들 수 있는 nested routes

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

어디다 보여줄지 표기해야함

function About(){
  return (
    <div>
      <h4>about페이지</h4>
      <Outlet></Outlet>
    </div>
  )
}

(3) styled-components
[장점]
1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있음
2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않음
3. 페이지 로딩시간 단축
[단점]
1. JS 파일이 매우 복잡해잠
2. CSS 담당하는 디자이너가 있다면 협업시 불편

(4) 컴포넌트
1. 생성 (mount)
2. 재렌더링 (update)
3. 삭제 (unmount)

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

(6) Context API 단점
1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링
2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮아짐

그래서 이것 보다는 redux 같은 외부라이브러리를 많이 사용