[TIL] 리액트 스타일링 / 데이터 패칭시 useEffect 사용하는 법(24.01.30 - 33일차)

리액트 스타일링

---

리액트 실습 프로젝트 스케폴딩은 CRA기반으로 진행하였다.
이외에도 CRA가 특별한 설정을 햇기 때문에 다양한 스타일 적용이 가능하다.

1. css

   • JS에서 어떻게 CSS 파일을 불러올 수 있는 걸까?
   • CRA를 통해 설치된 웹팩이 우리 모르게 해 주고 있는 것

2. scss

   => 설치 방법은

   npm i sass --save-dev

   이렇게 설치하는 이유는 sass가 개발 과정에서만 필요하고, 실제 배포시에는 컴파일된 CSS 파일만 있으면 되기 때문! => 개발 의존성인 devDependency에만 설치하면된다!
   

3. CSS Modules
   => 리액트에 내장된 CSS 모듈이다.

   • [name].module.scss 방법을 사용하여 적용한다.
     => 클래스 이름 충돌을 방지할 수 있다는 장점이 있다.

4. CSS in JS

   • styled-components
   • emotion 등이 있다.

5. 클래스명 기반의 UI 라이브러리

   • Tailwind CSS
   • bootstrap 등등

SCSS + cssModule

---

중첩 이름 충돌방지

scss, styled-components 등은 -D 키워드 붙여서 설치 ⇒ devDependency로

js파일에 → css넣는것은 웹팩이나 기타로 가능하나,

css파일 → js를 넣는 것은 안됨

styledComponent는 props 스타일링이 가능하다

리스트렌더링

---

리스트렌더링 시 key 필요

리액트가 리스트를 다룰때 key 라는거.

key값에 유일한 값을 넣어줘야한다.

근데 보통 key에 인덱스값을 넣지 말라고 한다. 리액트는 인덱스비교를 통해 값이 변화한것을 알게되므로.
⇒ 값이 달라지더라도 인덱스가 그대로면 변화안한것으로 인지하는?

⇒ 그냥 유일한 값을 가지는게 베스트!

useEffect

---

부수효과를 처리하기 위한 리액트 훅이다.

• 데이터 fetching: API 호출과 같은 비동기 작업
• 이벤트 리스너 설정: 컴포넌트가 마운트될 때 이벤트 리스너를 설정하고, 언마운트될 때 정리한다.
• DOM 업데이트: 외부 라이브러리를 사용하여 DOM을 직접 조작하는 경우에 사용할 수 있다.

useEffect(() => {
	// 2가지를 쓸 수 있음
	// 부수효과

	// 클린업함수
	return () => {
		
	}
}, [someValue])

useEffect(() => {
  // 여기에 부수 효과를 수행하는 코드를 작성합니다.
  
  return () => {
    // 여기에는 컴포넌트가 언마운트되기 전, 또는 업데이트되기 전에 실행되는 '정리(clean-up)' 코드를 작성합니다.
  };
}, [dependencies]); // 여기에는 부수 효과를 유발할 의존성들을 추가해요.

그리고 클린업함수를 항상 까먹지 않도록 하자!

cf. jsonplaceholder를 사용하여 데이터 가져오는 방법도 있따.

코드 깃헙에 올릴때 API 키같은거 안올라가게 유의.

• fetch시 삼항연산자로 url 부여하면 안됨.→ 개수 늘어나면;.. props 내려줘서 moviesList에서 받게하면됨.
  

★fetch를 한번에 처리하는방법?

=> Promise.all

순수함수

같은인풋이 들어오면 → 같은아웃풋이 나오는게 보장되는함수

사이드이펙트가 없는

⇒ 예측가능한 컴포넌트를 만들수있다.

• return 문 내에서 변수 합치기

JSX 내부에서 직접 문자열 템플릿을 사용할 수 있습니다

function ImageComponent() {
    const baseUrl = "https://example.com";
    const path = "/images";
    const query = "?id=123";

    // 리턴문 내에서 직접 변수 결합
    return (
        <img src={`${baseUrl}${path}${query}`} alt="description" />
    );
}