[TIL] 2023-04-04 DAY14

---

리액트(+테일윈드)

GIT 주소 :

---

• 각종 팁

1. 앱솔루트로 위치를 줄 때는 방향(top,left 등)을 주고 margin으로 위치조절함.
   <div className="absolute top-0 left-0 m-1">♥︎</div>
2. 리액트에서 컴포넌트 사용에는 다양한 방법이 있음.
   

• 함수형과 클래스형의 차이점
  클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며, 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook(함수 붙여쓰기)을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거, 함수형 컴포넌트는 state 와 라이프 사이클 API 를 사용할 수 없다는 단점이 있었지만 현재, 훅에 의해 이 모든 문제가 해결되었다.

• 오늘 배운것들

1. DAY14 복습(review폴더),
2. useEffect(effect폴더)
3. useState(effect폴더)
4. 다이나믹 라우팅(h662폴더)

useEffect

기본 형태
useEffect( function, deps )

• function : 수행하고자 하는 작업
• deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 -> 바뀌는 값
  생략할 경우 리렌더링 될 때마다 실행
  
  
• 기본적으로 return이 메인 렌더링이지만 컴포넌트가 렌더링 된 이후 비동기적으로 처리되어야 하는 효과들을 Side Effect라고 부릅니다.
  

다이나믹 라우팅(동적 라우팅)

• App.jsx
  
  
  
• portfolioCard.jsx(pages)
  
  
  
• PortfolioCard.jsx(components)
  
  순서 : App에서 일단 다이나믹 라우팅으로 설정해주고(:projectId를 쓰면 하위 페이지 링크 모두 사용가능), page에서 Link를 이용하여 각각의 props 인자에 맞는 페이지로 이동하게 한 후, 컴포넌트에서 searchParams를 이용하여 경로에서 받은 인자들을 활용하여 화면에 표시해준다.

useState

• useState toggle 응용
  
  useState는 껐다 켰다 역할을 수행하는 스위치로 자주 사용한다.(동적인 값 관리)