✨ React 정리 - 8) Styled-Components, 라이프사이클(Lifecycle) & 훅(useEffect) ✨

✔️ Styled-Components

css 파일 없이 js파일에서 컴포넌트를 스타일해서 사용할 수있는 라이브러리

장점

1. React에서 css파일 없이 컴포넌트 제작 가능
2. 스타일이 다른 js 파일에 간섭하지 않음
3. 페이지 로딩시간 단축

   css의 스타일 간섭(오염)을 방지하려면 컴포넌트명.module.css로 파일명을 선언해서 import해서 사용하기

단점

1. js 파일 매우 복잡해짐
2. 중복되는 스타일은 컴포넌트간 import해서 사용하기 떄문에 css파일과 다름 없음
3. 협업시 css 담당의 숙련도 이슈

1. 설치 방법

2. 사용방법

import > 스타일할 컴포넌트 선언 > 사용

import styled from 'styled-components'; // 1. import

let YellowBtn = styled.button` 
  background: yellow;
  color: black;
  padding: 15px;
`; // 2. 선언

function Detail(props) { 
  return (
      <div className="container">
          <YellowBtn>버튼</YellowBtn> // 3. 사용
      </div>
    )
}

3. props로 컴포넌트 재활용

props를 활용해서 유사한 컴포넌트를 쉽게 변경할 수 있다.
조건식을 사용해서 dark mode 같은 기능 구현도 활용 가능하다.
기존 스타일 복사 가능

1. 컴포넌트에서 props명에 값을 추가한다.
2. 스타일에 ${(props) => props.props명 }을 추가한다.

import styled from 'styled-components';

let Btn = styled.button` 
  background: ${ (props) => props.bg }; // 2번
  color: ${ (props) => props.bg == 'blue' ? 'white' : 'black' }; // 조건식을 활용
  padding: 15px;
`;

let newBtn = styled.button(Btn)`
... 스타일 코드
`; // 기존 스타일 복사

function Detail(props) { 
  return (
      <div className="container">
          <Btn bg="blue">파란버튼</Btn> // 1번
    	  <Btn bg="red">빨간버튼</Btn>
      </div>
    )
}

---

✔️ Lifecycle & 훅(useEffect)

컴포넌트의 Lifecycle
mount: 페이지에 장착
update: 업데이트
unmount: 페이지에서 제거

useEffect 동작원리와 자주 사용하는 코드

useEffect 안에 있는 코드는 html 랜더링 후 동작한다.
1. 어려운 연산
2. 서버와 통신 후 데이터 가져오는 작업
3. 타이머 장착

사용하는 이유

js는 위에서부터 아래로 실행한다. 복잡한 연산이 존재하는 경우 html을 랜더링 후 동작하기 때문에, 페이지 로딩 속도를 증가시킬 수 있다

useEffect라 불리는 이유

Side Effect는 함수의 핵심 기능과 상관없는 부가 기능을 뜻한다.
useEffect는 함수의 핵심 기능이 아닌 부가 기능을 저장해서 사용하기 때문에 useEffect라 불린다.

사용 방법 1. component내에서 useEffect(훅) 사용 << 선호하는 방식

useEffect는 컴포넌트를 재랜더링한다
build전에는 debuging을 위해 해당 코드가 2번 실행되는데 이를 방지 하기 위해선 index.js 파일에 React태그에 .StrictMode를 제거해주면 해결된다.

useEffect Dependency: useEffect(()=>{},[]>이곳을 뜻한다)
해당 변수가 달라질 때 마다 실행시킨다. 비어있으면 1회 실행

function Detail() {
  useEffect(() => {
	
  }) // mount, undate시 해당 코드 실행
  
  useEffect(() => {
	
  },[]) // mount시 해당 코드 실행 , update될 때는 실행 안됌
  // 컴포넌트 mount시 1회만 실행
}

예시1.

mount, update되면 해당 요소에 false 값을 주어 요소 제거

function Detail(props) {
  useEffect(() => {
    setTimeout(() => {
      setAlert(flase);
    }, 2000);
  }.[]);
  
  let [alert, setAlert] = useState(true);

  return (
    <div className="container">
      {alert == true ? (
        <div className="alert alert-warning">2초 이내 구매시 할인</div>
      ) : null}
		</div>
	</div>
	)
}

예시2.

clean up function : useEffect 안에 코드를 실행하기 전에 먼저 실행하는 코드

mount시 실행 안되며, unmount시 실행된다

return을 사용해서 기존 코드를 제거할 때 유용하게 사용

function Detail(props) {
  useEffect(() => {
    let timer = setTimeout(() => {
      setAlert(flase);
    }, 2000);
    
    return () => {
    	clearTimeout(timer) // 재랜더링 될때 마다 타이머가 생성 되기 때문에 이를 방지하고자 이전에 생성된 타이머를 제거해서 버그 방지, 리소스 확보
    }
  }.[]);
  
  let [alert, setAlert] = useState(true);

  return (
    <div className="container">
      {alert == true ? (
        <div className="alert alert-warning">2초 이내 구매시 할인</div>
      ) : null}
		</div>
	</div>
	)
}

예시3.

수량을 입력해야 하는 input값에 문자를 입력하게 되면 경고 표시

function Detail(props) {
  let [num, setNum] = useState('');

  useEffect(() => {
    if (isNaN(num) == true) { // 조건식의 값이 숫자가 아닌것이 맞다면(숫자가 아니라면)
      console.log('숫자를 입력해주세요'); //해당 코드 실행
    }
  }, [num]); // num의 값이 변경 될 때 마다 실행

  return (
    <div className="container">
      <input
            onChange={(e) => {
              setNum(e.target.value);
            }} // 입력되는 값을 실시간으로 확인해서
	  ></input>
	</div>
	)
}

사용 방법 2. component 자체 제작

class Detail2 extends React.Component {
  componentDidMount() {

  } // 컴포넌트 mount시 해당 코드 실행
  componentDidUpdate() {

  } // 컴포넌트 update시 해당 코드 실행
  componentWillUnmount() {

  } // 컴포넌트 unmount시 해당 코드 실행
}