React Hook(1)

😊 Hook를 사용하는 이유?

• 기존의 리액트는 class, function 컴포넌트로 이루어짐.
• class 컴포넌트는 this, state, Recycler method를 사용하기 복잡.
• Hook의 사용으로 Class보다 쉬운 Function로 state 등을 구현 가능.

🎁 기존의 React

• 버튼의 클릭에 따른 increment, decrement 함수구현.

😥 Standard

class Appugly extends Component {
  state = {
    item: 1
  };
  incrementItem = () => {
    const { item } = this.state;
    this.setState({
      item: item + 1
    });
  };
  decrementItem = () => {
    this.setState({
      item: this.state.item - 1
    });
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>ss {item}</h1>
        <h2>lets go</h2>
        <button onClick={this.incrementItem}>Increment</button>
        <button onClick={this.decrementItem}>Decrement</button>
      </div>
    );
  }
}

• 보다 복잡하고 코드의 크기가 큼.

🎁 Hook React

😀 Hook

const App = () => {
  const [ item, setItem ] = useState(1);
  const incrementItem = () =>setItem(item+1);
  const decrementItem = () =>setItem(item-1);
  return (
    <div className="App">
      <h1>ss {item}</h1>
      <h2>lets go</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
};

• useState의 활용으로 보다 코드가 간결해짐.
• const [item, setItem] = useState(1)
  • item, setItem의 변수명은 수정 가능.
  • useState(1)은 item의 기본값을 1정으로 설정한다는 뜻.

😁 기존의 코드에서 Hook를 사용하니 길이가 2배는 줄은 것 같다

참고 : <노마드 코더>