Hooks & Styled Component💝

개념 정리🙄

1차 프로젝트 때 처럼 매일 매일 로그를 정리하려 했으나, 방대한 공부 양과 새로 구현해야 하는 기능 들 때문에 포스팅을 못했다 ㅠ_ㅠ 2차 프로젝트의 새로운 컴포넌트에 hooks와 styled component를 적용 하려 했는데, 나의 욕심이었다.. 우선 할 수 있는 부분 부터 구현하고, 나중에 전체로 refactoring 할 수 있으니, 너무 스트레스 받지 말고 개념부터 차근차근 정리하고 진행해야겠다.

functional component와 Hooks💦

이 또한 지나가리라 이 또한 쉬워지리라 주문을 거는중...

class형 컴포넌트와 functional 컴포넌트의 차이

• 기존에 state,props,lifecycle을 이해하기 위해 class형 Component만 사용했으나, functional component+hooks 조합으로 2차 프로젝트에 접목하기 위해 기본내용을 정리 해볼까 한다!

useState👻

class형 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
	  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

class를 functional 로 바꿔 본 형태

import React, { useState } from 'react';
// state관리를 useState로 관리 하기 위해 위에서 정의해 준다.
fuction Example () {
 
  const [count, setCount] = useState(0)
  //useState 기본값으로 count=0으로 지정 해준다는 뜻
  //class component 식으로 보면 this.state = {count :  0} 해놓은 거랑 같은 것! 
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count+1)}>
          //여기서 setState와 비슷한 형태인데, count 값을 조정 할때 이렇게 사용한다.
          Click me
        </button>
      </div>
    );
  }

useEffect👻

• componentDidMount, componentDidUpdate 을 대신 하는 useEffect
• class component에서는 state나 props가 바뀌면 componentdidupdate가 실행되고,state나 props가 바뀌면이라는 조건을 걸고 componentdidupdate가 실행 시킬 수 있는데 이부분을 useEffect로 적용 가능하다.
• 예시

//컴디마는 빈 배열
   useEffect(() => { document.title = `You clicked ${this.state.count} times`;},[])

//컴디업은 조건을 달고 옴 
  useEffect(() => { document.title = `You clicked ${this.state.count} times`;},[count])
//count가 바뀌었을때 라는 조건을 걸어 준 것 
}

class형 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate(prevProps, prevState) {
		if(prevState.count !== this.state.count){
	    document.title = `You clicked ${this.state.count} times`;
		}
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

class컴포넌트를 functional component로 변경

import {useState, useEffect } from "react";

function Example () {
 
    const [count, setCount] = useState(0) 
   
   useEffect(() => { document.title = `You clicked ${this.state.count} times`;},[])

  useEffect(() => { document.title = `You clicked ${this.state.count} times`;},[count])
}

setState비 동기 함수는 useEffect 여러 개로 처리 가능

// class component
handleBtnColor = () => {
	this.setState({
		color: "red"
	}, () => console.log(this.state.color))
}

// functional component
const [color, setColor] = useState("blue")

const handleBtnColor = () => {
  setColor("red")
}

useEffect(() => console.log(color),[color])

👑 styled Component

Why styled-component?

• props로 넘겨줘서 상태를 변경해줘야 하는 style 속성을 관리하기 쉬움
• className을 직접적으로 노출하지 않아서 보안에 좋음
• 고유한 className을 자동으로 생성해서 전역에서 중복 className으로 충돌 될 염려가 없음

Adapting based on props

• 비슷한 형식인데 다른 색상일 때, props값으로 적용하기 위해 사용 함

render(
  <div>
    <Button>Normal</Button> 
      /* Button component를 만든 뒤 아래 button태그의 설정으로 지정 */

    <Button primary>Primary</Button>
     /* Button component의 props 값을 지정 하여 다른 속성을 주기위해 사용 */

  </div>
);

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
       /* props에 따라 다른 배경 색 적용*/

  color: ${props => props.primary ? "white" : "palevioletred"};
         /* props에 따라 다른 폰트 색 적용*/

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

Extending styles

• 한 스타일의 속성을 다 가져오고 몇 요소만 수정해야 할 때 사용함

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Nesting & Global Style(의미없는 styled-component 지양하기)

styled-component도 nesting이 이렇게도 가능함

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red;
  }

  &.something {
    background: orange;
  }

  .something-else & {
    border: 1px solid;
  }

Global Style

2차 프로젝트 때 sass와 styled-component를 적절히 사용하는 것이 목 표!!