React useEffect, styled-components, ajax, useContext

리액트 재활훈련 3일차 드가자.

useEffect

useEffect를 사용하지 않아도 mount, update시 실행된다.
하지만 useEffect 내부코드(작업 오래걸리는.. 또는 쓸데없는..)는 html 렌더링 이후에 동작하기 때문에 UX 측면에서 좋다.

컴포넌트 생명주기를 알아보자.

1. 컴포넌트 뿅(mount)
2. 컴포넌트 변신(update)
3. 컴포넌트 나가(NAGA, unmount)

import 하시고

//컴포넌트 로드시, 업데이트 시 실행되는 기본상태
useEffect(()=>{
    console.log('뿅, 업데이트')
  });
  
//로드시에만 실행되는 의존성 배열을 비워둔 꼼수형태
useEffect(()=>{
    setTimeout(()=>{ setModal(false) }, 5000) //html에 Modal = true로 노출시킨 후 html 렌더링이 완료되면 useEffect가 실행됨으로 로드 5초 후 Modal 사라지는 기능
  }, [//여기 비어있쥬])
  
//useEffect 동작 전 1순위 코드실행 (중복 방지용)
useEffect(()=>{
    let timer = setTimeout(()=>{ setModal(false) }, 5000) //렌더링시 타이머가 무한생성
    
    return ()=>{
    	clearTimeout(timer) 1순위 코드로 중복방지를 위해 기존 타이머 지우고 다시 생성
  }, [])

styled-components

//설치
import styled from 'styled-components'

//선언
함수 밖 상단
let 컴포넌트명 = styled.태그명`
	//css 서식
    margin : 0 auto;
    //컴포넌트 형식으로 사용하기 때문에 props를 사용한 변수 사용가능
    background : ${props => props.color};
    color : ${ props => props.bg == 'black' ? 'white' : 'black' };
` // 백틱 ``

//사용
<컴포넌트명 color='black'></컴포넌트명>

장점

• 모듈.css와 같이 다른 js 파일에 적용되지 않는다.
• css 파일에서 import해서 사용하는것이 아닌 된다.

ajax

asynchronous Javasciprt and XML

1. XMLhttpRequest

2. fetch 내장 메서드

3. axios

   axios가 json 형식을 편하게 변환해주기 떄문에 axios를 많이 쓴다.

() => {
          // isLoading true (html 렌더링이 빨라 로딩으로 대체)
            axios.get(`URL 주세오`)

              .then((응답) => {
                console.log(응답.data)
                // isLoading false
              })
  
              .catch(() => {
                console.log('오류')
                // isLoading false
              })
        }

다음엔 async await 써보는걸로..

useContext

prop drilling을 막아주는 내장 훅이다. Provider로 감싸고 싶은 부모를 감싼 후 value로 원하는 상태를 공유, 하지만 상태변경시 부모부터 모든 자식이 재랜더링되고 재사용성이 구리다.

//선언
export let 변수명 = React.createContext();

<Context1.Provider value={ {상태(여러개 가능)} }>
	<App/>
</Context1.Provider>
  
//사용
import {변수명} = from './경로'
  
const {상태} = useContext(변수명);