Hello ReactWorld - 4 useEffect

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

styled-components

css 파일 불러와서 스타일 calssName등에 스타일 적용하기 귀찮은 경우
원하는 요소를 컴포넌트로 지정해서 사용할 수 있게 해주는 react 라이브러리

사용방법
1. 라이브러리 설치

npm install styled-components

2. 사용할 위치에 import

import styled from 'styled-components';

3. 컴포넌트로 등록

let YelloBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`
// styled.button 안의 css 값이 적용된다.

4. 원하는 위치에서 컴포넌트처럼 사용하기

return (
  <div className="container">
    <YelloBtn>버튼</YelloBtn>
  </div>
);

예쁜 노란색 버튼이 생성되었다.

styled-components 장점
1. css 파일까지 안가고 자바스크립트에서 그냥 필요한대로 설정이 가능
2. 스타일이 다른 js 파일로 오염이 되지 않음
3. 페이지 로딩시간 단축
4. js로 작성하기 때문에 간단한 동적인 코드 작성이 가능

단점
1. JS파일이 매우 복잡해짐
2. 중복 스타일은 컴포넌트간 import를 통해서 사용이 가능한데, 이러면 css파일에 접근하는것과 차이가 없음
3. 현업시 css 담당의 숙련도 이슈

Lifecycle과 useEffect 1

Component의 LifeCycle

• 컴포넌트가 화면에 보이는 순간
  컴포넌트가 페이지에 장착(mount) 됨.
• 페이지 안에서 컴포넌트를 조작하면서
  컴포넌트가 수정(update) 됨
• 화면을 나가는 순간
  컴포넌트가 제거(unmount) 됨

useEffect

mount, update 시 코드 실행

useEffect(()=> {
  console.log('안녕');
})

  
let [count, setCount] = useState(0);

return (
  <div className="container">
    {count}
    <button onClick={() => {
      setCount(count+1);
    }}> 버튼 </button>
  </div>
)

위처럼 작성시

콘솔창에
페이지가 처음 로드될 때 '안녕'
버튼을 클릭하여 state를 변경할 때 '안녕'
이라는 로그가 출력이 된다.

근데 useEffect 없어도 안녕이라는 단어가 출력이 된다!

useEffect 쓰는 이유
react는 기본적으로 비동기 방식!
그냥 아무 영역에 console.log("안녕"); 코드를 작성시 아무때나 가지고 올 수 있을때 실행시는데 비해
useEffect는 화면 랜더링이 끝난 후에 동작

useEffect - dependency

useEffect의 실행조건을 넣는 영역

useEffect(()=> {
  setTimeout(() => {
    setAlert(false) }, 2000)
}, [alert])

위처럼 작성시
alert 이라는 state가 변할때만 useEffect가 실행된다.

이를 이용한 꼼수(?) 문법으로

useEffect(()=> {
  setTimeout(() => {
    setAlert(false) }, 2000)
}, [])

이렇게 dependency에 아무것도 주지 않았을 경우
컴포넌트가 mount될때만 한 번 실행되고 update 시에는 실행되지 않는 코드를 작성할 수 있다.

useEffect - clean up function

useEffect(()=> {
  let timmer = setTimeout(() => {
    setAlert(false) }, 2000)
    return () => {
      clearTimeout(timmer) // 타이머 초기화 해주는 함수
    }
})

useEffect 안쪽의 영역에 return 구문을 Optional 하게 넣으면
useEffect가 실행되기 전에 먼저 해당 구문을 실행해준다.

재랜더링이 잦은 react코드의 특성상
타이머 같은 요소를 초기화해줄때 주로 사용

참고
나는 바보라서 정리안하면 나중에 들었던것 같은데?? 하고 찾을게 분명하다!!!!
Clean Up Function 은 mount시에는 실행되지 않고, unmount시 실행이 된다