[React] 6일차 일기

styled-components라는 것과 useEffect 공부했음!

 

1. styled-components 설치 방법

 - npm install styled-components를 터미널에 쓰면 된다. 설치되면 import styled from 'styled-components'하면 됨.

 

2. 변수에 담아서 styled.요소`css코드작성`

 

3. 컴포넌트를 생성해주는 문법이기 때문에 변수 첫글자는 대문자로 해주기

 

4. styled-components의 장점

  1) css파일 안열어도 됨

  2) 스타일이 다른 js파일로 간섭되지 않음. (원래 App.css는 모든 파일에 간섭함)

    * App.module.css 이렇게 쓰면 App.js에만 css파일 적용됨

  3) css파일이 필요가 없으니까 페이지 로딩시간이 단축됨

  4) 이것도 컴포넌트이기 때문에 props문법 사용 가능

    -> 원하는 스타일에 ${props => props.변수} 쓰면 됨. 그리고 컴포넌트 태그에 변수 = '원하는 값' 넣으면 적용됨

  5) css와 다르게 간단한 프로그래밍 가능. 조건문같은거 넣을 수 있음

  6) 기존 컴포넌트 스타일이 마음에 들면 다른 변수에 복사해서 넣을 수 있음.

    ex) let 변수 = styled.요소(이전 변수)`추가 커스터마이징`

 

5. styled-components의 단점

  1) js파일이 복잡해짐

  2) 다른 js파일에서 컴포넌트 쓰고 싶으면 import 해야함. 이러면 css랑 다를게 없음

  3) 협업할 때 숙련도에 따라 이슈가 생길 수 있어서 상의해봐야함

 

(나는 아직 장점보다는 단점이 더 크게 다가와서 css로 쓸거같긴하다)

 

6. 컴포넌트의 Lifecycle : 컴포넌트가 장착(mount)되고 업데이트 되고(update) 제거되는 (unmount) 것이 사람의 인생 주기 같다고 해서 Lifecycle이라고 표현

 

7. Lifecycle을 알면 mount, update, unmount 중간중간 코드를 실행(hook)할 수 있음

 

8. 옛날에 class로 컴포넌트 만들 때는...

class 컴포넌트명 extends React.Component{

    componentDidMount(){

      컴포넌트 mount시 코드 실행

    }

    componentDidUpdate(){

      컴포넌트 update시 코드 실행

    }

    componentWillUnmount(){

      컴포넌트 unmount시 코드 실행

    }

}

이런 식으로 작성했다.

 

9. 요즘은 function으로 컴포넌트를 만들기 때문에 useEffect( 콜백함수 ) 넣으면 된다. useEffect import도 필수

 

10. 콜백함수는 mount, update(재랜더링)시에 코드 실행시켜줌

 

11. useEffect 안에 있는 코드들은 html 랜더링 후에 작동하기 때문에 어려운 연산, 서버에서 데이터가져오는 작업, 타이머 등등 부가기능들을 넣어두면 효율적임

 

12. useEffect 실행조건 넣을 수 있는 곳 : [] (dependency 라고 부름. state 변수 넣을 수 있음)

 

13. dependency를 공백으로 놔두면 컴포넌트 mount시 1회만 실행한다.

 

14. useEffect안에 return 콜백함수 사용가능. useEffect가 동작하기 전에 실행되는데 이를 clean up function이라고 부른다.

 

15. clean up function은 기존 코드를 지우기 위해 사용한다. 예를 들어 시간이 오래걸리는 코드를 실행하다가 재랜더링되면 이전에 실행하던 코드 위에 또 다시 새로 실행되기 때문에 버그가 발생할 수 있다. 그 때 clean up function으로 기존 데이터 요청을 제거해달라고 코드를 짜두면 재랜더링시에 효율적으로 사용가능하다.

 

16. clean up function은 mount시에는 실행되지 않지만 unmount시에는 실행된다.