24일차 TIL(React 숙련 / styled Component, useEffect, useContext)

styled Component :
Css - in - JS 이며 js코드를 css코드로 컴포넌트를 꾸미는 방식이다.

const xxx = styled. 뒤에는 항상 HTML요소가 온다.

조건부 스타일링 :
styled Component 는 해당 컴포넌트 내에서만 활약하는데
전역스타일링을 이용하면 프로젝트 전범위적으로 사용이 가능하다
globally - GlobalStyle

Sass : syntactially Awesome Style Sheets
css를 기존 방법보다 더 효율적으로 사용하기 위해 만들어진 언어로
css는 웹 프로젝트 규모가 커질수록 코드가 복잡해지고 유지보수도 복잡해진다

동일 코드 복사 반복을 지양하고 코드의 재사용성과 가독성을 향상시켜줄수있게끔

 

** 추가 적으로 프로젝트 진행시 초기에 각 태그의 default style을 제거하기 위해 css reset 를 삽입해준다.


Hook
useState는 
- 가장 기본적인 hook
- 함수형 컴포넌트 내에 가변적인 상태를 갖게함
- 오늘까지 만들어 온 카운터 app, toDoList...

리액트는 전체 같은 요청이면 하나로 처리
함수형 업데이트 란 여러개를 한번에 처리해주는 방식

useEffect
의존성 배열 (dependency array)
useEffect 렌더링 될 때 마다 특정한 작업을 수행해야할 때 설정하는 hook
- 컴포넌트가 화면에 보여졌을 때 
- 컴포넌트가 화면에서 사라졌을 때

1. input 에 값을 입력 
2. value 즉 state가 변경
3. state가 바뀌었기 때문에 app 컴포넌트가 리랜더링
4. 리랜더링 -> useEffect()

Dependency array 의존배열

useEffect(() => {
        console.log(`hi useEffect ${value}`);
        return () => {
            // clean up
            console.log("사라짐");
        };
    }, [value]);         뒤에 [] 배열을 추가해준다.

useRef 
state와 비슷하지만 state는 변화가 일어나면 리랜더링을 걸어줌
내부 변수들은 초기화가 됨
ref에 저장한 값은 렌더링을 일으키지 x 
ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있다
컴포넌트가 수백번 렌더링 되어도 ref에 저장한 값은 유지됨

useRef 정리
state는 리랜더링이 꼭 필요한 값을 다룰 때 씀
ref는 리랜더링을 발생시키지 않는 값을 저장할 때 사용한다

# react의 배치 업데이트 :
React 에서 state를 업데이트 하는 방식이 배치 업데이트 방식이라
내부에서 변경된 변수 ex ) setId 가 10자리를 입력했다고 해서 바로 넘어가는게
아니라 한자리씩 밀린다. (반영되기 직전까지)
이걸 인지하고 이런 함수를 어디에 써줘야할 지 배치에 신경써야 한다.

useContext
react에서 context의 필요성
props를 부모-> 자식에게 넘겨줄 때 수없이 많이 깊어지고 복잡해지면서
props drilling
1 - 2 - 3 - 4 가 순서대로 있다면 굳이 2 , 3을 지나지않아도 되는 상황에서도
한 번씩 거치기 때문에 계속 깊어진다.
context API에서는 전역적으로 선언된 데이터에 접근이 가능해지면서 이런 상황을 방지한다.

context API

• createContext : context 생성
• Consumer : context 변화 감지
• Provider : context 전달(to 하위 컴포넌트)

보내줄 부모 (1)에서 .Provider 를 써주고
받을 컴포넌트에서 해당 컴포넌트 useContext(xxContext) 를 다시 변수로
저장해주고 해당 변수의 .키값을 입력해준다.
******* 여기서 useContext는 props로 받아 오는게 절대 아니다.

주의 사항
*렌더링 문제
Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리랜더된다;
value 부분을 신경써줘야 하는 이유이며, 이러한 단점은 메모리제이션에서 해당 키가 된다.

 

 

정리하면서 강의를 들으니까 이전에 공부했던 때 보다 훨씬 나은거 같다.

오프라인이여서 지원한거였는데, 강의 시간이 짧고 소통이 쉽지 않은 여건이여서인지

놓치거나 이해 못한 부분은 pause 걸거나 놓쳤다거나 질문하기가 쉽지 않았다. 점점 적응해서인지 혼자 찾아보는 버릇이 생겼는데, 이해가는 부분도 있지만 결국 찾지 못 하는 부분도 분명 생겼었다.

숙련주차여서 그런지 몰랐던 내용들이 많이 등장해서 신기하고 설렘으로 다가온다.

아침에 조금 더 멀쩡하게 깨어있도록 해야겠다.