[항해99 주특기] 2주차 강의내용 -React 1편

Style Components

Css in js방식

js코드로 css코드를 작성을 할 수 있다.

 

새로운 package를 사용해야하여 따로 설치를 해주어야한다.

yarn add styled-components

 

왜 써야하나??

 

JS의 패키지 중의 하나로써

꾸준히 사랑받고 사용되고 있으니 대세를 따르자

emotion, styled components, tailwindscc 중에서도 가장 인기가 많다 

(하지만 tailwindcss도 꾸준히 올라오고 있기에 한번 봐보자)

 

패키지란?

리액트에는 없지만 리엑트에서 가져와서 사용할 수 있는 서드파티 라이브러리

 

사용방법

변수선언방법으로 (styled.HTML요소)

const stBox = styled.div`

const StyledDvi = styled.div`
	css 설정하는 부분
`;

<StyledDiv />

 

조건부스타일링을 할 수있다.

컴포넌트 선언부분에서 props를 받아와서 styledDiv부분에서 끌어서 쓸 수 있다.

${(props) => props.borderColor};  // 이게 css부분에 들어가면 된다

한줄일경우에 리턴문을 생략해도 된다 이것을 기억하고 여러 줄이면 ()로감싸면 return이 필요한 녀석들이 return을 굳이 안써도 된다 

 

 예시에서 스위치문에 브레이크 안썼는데 작동이 되는 이유는?

 

---

Global Styles

전역스타일링이라고도 하는 이게 무엇인가? 

스타일드컴포넌트는 해당 컴포넌트 안에서만 사용을 하였다.

근데 우리는 프로젝트 전체를 아우르는 스타일이 필요하다 그럴 때 이놈을 사용한다.

 

지역컴포넌트에서 겹치는 부분이 있을것이다 폰트라던가 그럴 때 글로벌이라는 스타일을 만들어서 거기다가 집어 넣으면 된다.

const GlobalStyle = createGlobalStyle`
	body{
	// css넣고
}`

exrot default GlobalStyle;

 

일단 전역에다가 쓰고 글로벌로 한 애를 app.jsx에서 Wrapper로 감싸고 쓰는형식으로 되어있는 스타일컴포넌트

return (
	<GlobalStyle />
)

 

sass방식

책 참고

중첩해서 쓰는거는 굉장히 좋구만

다른 파일에서 import해서 사용할 수 있는게 좋구만

변수사용가능

 

css reset

기본적인 default style이 들어간다 이걸 제거할 필요가 있다

왜냐 기본적으로 우리가 주지 않은 값인데 기본적으로 얘가 가지고 있는 것이여서 한번 reset을 해야 쓰기 좋을 것이다 

방법이 정말 많아서 한번 다 이용을 해보즈아

강의자료에 있는거 복사해서 reset.css 만들어서 거기다가 붙여넣고 index.js에다가 import해주자

 

styled component 쓸 떄에는 $(안에들어가는걸 함수형태로 나태내주고 ${(props)=> props.color} 이런식으로 나타내야 한다.

 

hook과 관련 된 내용은 따로 정리할 예정임

 

---

리랜더리의 발생조건을 다시 살펴보자

state가 바뀌었을 때 props가 바뀌었을 때 부모컴포넌트가 리랜더링이될경우자식컴포넌트가 모두 리랜더링 된다

 

랜더링이 많이 든다(코스트가 많이든다) 줄이는것을 최적화(optimization)를 한다라고 표현한다.

리액트에서 최적화하는 방법

 

memo 

임포트해오는것보다도 React.memo 형태로 선언하고 쓰는 경우가 많다 

부모컴포넌트의 state만 바뀌었는데 자식컴포넌트까지 다 바뀐다 근데 그럴필요가 없다 그래서 memo를 쓴다

export default React.memo(App);

컴포넌트를 메모리에 저장해둔다(캐싱) 임시로 저장하고 필요할 때 가져다 쓴다 

---

useCallback

useMemo를 통해서 컴포넌트를 메모해 보았다 콜백은 인자로 들어오는 함수 자체를 메모이제이션하는것이다

컴포넌트가 메모이제이션됬음에도 불구하고 앱과 박스원이 같이 랜더링이 된다 이게 뭐지 왜 그런가??? 함수형 컴포넌트를 사용했기 때문이다. 이게 결국은 함수이기때문에 카운트를 초기화핸주는 함수도 결국에는 컴포넌트가 리랜더링될때 다시만들어지는 것이다 안에 속해있으니깐

초기화하는 로직에서는 setCOnut(o) 이기에 바뀐게 없는 props가 내려가는것처럼보이지만 불변성을 유지하는 특징에 빗대어 함수도 리랜더링되면서 다시만들어지니깐 새로운 주소를 다시 받은 함수가 되는것이기 때문에 받는 박스 입장에서는 props 가 바뀐것으로 인식이 된다 이때 바뀐것이 아니라고 말해주는것이 useCallback이다

useCallback이 저장하고있는시점에는 count가 0인시점이기때문에 useCallback 안에서 count를 달라고 하면 0이다

스냅샷 상태가 0이니깐 0을 출력하는게 맞다. 이걸 방지하려면 어떻게 하면 될까?

count가 변경될때만큼은 init함수는 다시만들어지는게 맞다 그러니깐 deps에다가 넣어야할 놈들을 생각을 해야된다잉

---

React.memo , useCallback, useMomo

컴포넌트를 메모  함수를 메모  밸류에 대한 메모(함수가 리턴하는 값, 값자체)

사용방법

const value = 반환할 함수();

 

const value= useMemo(()=> {return 반환할 함수()}, []); 반환할 함수가 가져온 값을 기억한다 콜백은 함수를 기억한다

차이점을 기억하자

 

useMemo의 의미를 찾아서 

엄청 무거운 컴포넌트가 있다

함수가 리턴값을 주는데 안에서 state값도 변경 안시켜 그렇다고 effect쓰기에는 리랜더링될때마다 선언되는데 이것도 망해 그니깐 값이 저장되는 그떄를 useMemo로 메모이제이션하면 된다 어짜피 항상 같은 값을 리턴하는 함수 또는 같은 값을 저장하는 값자체에다가 하면 되겠구나

useMemo로 값을 감싸주면 되는데 100을 리턴하는 함수에 반복문을 집어넣어서 무게를 무겁게 한 뒤 그 결과를 밸류에 넣으면 state가 바뀔때마다 리랜더링되면서 계속 반복되서 실행을 하게 되는데 이때 값에다가 감싸면 된다 그러면 처음 랜더링 될때만 값을 저장해놓고 다음부터는 안변한다.근데 deps에다가 뭔가를 집어넣으면 그 뭔가가 바뀔때는 얘가 다시 세팅이 되니깐 값이 변화해야할때도 유동적으로 반응할 수 있고만.

const value = useMemo(()=> {},[]) 

 

useEffect에 deps를 넣었는데도 그 이외의 상황에서 자꾸 리랜더링되는데 왜이럴까???

같은 컴포넌트내에서 다른 state가 바뀌게 되면 그 컴포넌트 리랜더링되기때문에 컴포넌트 안에서 선언한 값도 다시 불변성에 맞춰서 새로운 값이 저장이 된다는 것이다. 그러니깐 useEffect가 발동이 되는 것이다. deps가 변경되었다는 것이다 그러니 선언해놓은 me라는 객체에 useMemo로 감싸주게 된다면 (return으로 객체를 반환해야되니 꼭 써라) 원하는대로 된다~

남발하면 안되는 이유 이게 다 메모리공간을 별도로쓰는것이기때문에 꼭  필요할 때만 써야한다.

 

useEffect와 Callback에서 어떤차이가 있을지를 이걸 통해서 알 수 있는거지 Callback은 함수에 쓰고 Effect는 리렌더링 될때 안에 있는놈을 실행하고 이런개념인데 어라??? 근데 잠만 이거 좀 보자 state가 변경되는 타이밍에 리랜더링되니깐 그떄 안에있는 함수든 뭐든 실행해줘 근데 함수실행하겠지 둘다 들어가는게 함수형태니깐 결국 왜 나뉘었냐 자동으로 실행하고 원하는 타이밍에 실행한다는데 어짜피 둘다 deps에 state넣으면 둘다 state넣을때 실행해서 원하는 타이밍에 실행하는거다 이게 뭐가 다르냐??

---

생명주기 (Life Cycle)

마운트  >>  업데이트  >>  언마운드

컴포넌트 중심의 라이브러리의 집합체이다

 

마운트 될 때

constructor(생성자)가 호출되고 맨처음 만들어질 때 만들어진다

getDerivedStateFromProps 부모로부터 props를 전달 받을 때 state에 값을 일치시키는 역할을 하는 메서드 (마운트와 업데이트 떄 호출)

render 랜더링하는 메서드(화면에 그리는 메서드) DOM에 마운트하기위해서 사용함

componentDidMount 컴포넌트가 브라우저에 표시가 된 후에 호출되는 메서드임

 

업데이트 될 때

getDerivedStateFromProps 마운트 과정에서 동일하게 호출되었던 메서드 부모로부터 props를 전달 받을 때 state의 값을 일치시킨다

shoudComponentUpdate 리렌더링 여부 판단 true일경우 리랜더링 진행 false일결우 진행 안함

함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.

render 변경사항이 다 반영되면 준비완료되고 호출됨

getsnapshitVeforeUpdate 컴포넌트의 변화가 일어나기 직전에 DOM에 상태를 저장한다 componentDidUpdate 업데이트 완료 후 호출된다

 

언마운트 될 때 (제거되는 시점)

componentWillUnmount 컴포넌트가 사라지기 전에 호출되는 메서드 useEffect에서 return문쓰는거 clean up부분에 대한 것임

---

Virtual DOM 

 

객체상태로 메모리에 저장하기 떄문에 실제 돔을 조작하는거보다 훨씬 접근하는게 빠르다.

(실제 돔을 조작하는 것보다 메모리상에 올라와있는 자바스크립트 객체를 변경하는 것이 훨씬 가볍다)

돔 조작과정을 봐보자 

디핑 

변경되면서 생성된 2번과 이전에있던 1번을 비교해서 어느 부분에 변화가 일어났는지 빠르게 파악

 

재조정

파악이 끝난 변화가 일어난 부분에 대해서 한개한개씩 적용시키는 것이 아니라 모두 모아서 한번만 적용시킨다

 

배치업데이트 

함수형으로 set하지 않고 3개를적었을떄 1개만 올라가는 특징으로 인해 재조정에서 한번만 적용시킨다

 

 

 

 

 

 

나중에 알아보자

사용하면 굉장히 빠르다

밸리데이션 체크 이게 뭔가 아이디나 이메일 같은 것들이 오면 아이디가 8글자 이상와야된다라던가 체크를 해야하는데 그떄 DOM API를 이용해서 가져와야한다 DOM요소에 대해서 깊이 공부를 해보자

함수이름을 넣었을때 함수호출을 넣었을때 함수형태로 넣었을때

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

매개변수로 함수를 받을때 함수호출을 받을 때 차이를 알아보자

 

rfce(자동완성)