[220821] useEffect

styled-components

css가 컴포넌트에 종속 되게끔

 컴포넌트.module.css

---

props로 배경색 바꾸기

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

 

 

 

 

 

useEffect

html이 렌더링 된 다음 실행됌

1. 이러면 재렌더링마다 코드를 실행가능합니다.

useEffect(()=>{ 실행할코드 })

2. 이러면 컴포넌트 mount시 (로드시) 1회만 실행가능합니다.

useEffect(()=>{ 실행할코드 }, [])

3. 이러면 useEffect 안의 코드 실행 전에 항상 실행됩니다. 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

4. 이러면 컴포넌트 unmount시 1회 실행됩니다.

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

5. 이러면 state1이 변경될 때만 실행됩니다. 

useEffect(()=>{ 
  실행할코드
}, [state1])

---

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][props.탭]
}

 

왜냐면 props.탭이 0이면 저 긴 array자료에서 0번 자료를 꺼내줄테니까요.