[project_nemo] 함수형 컴포넌트 state관리

useState()

함수형 컴포넌트는 원래 state를 사용할 수 없다.

하지만 이젠 리액트 훅 중에 하나인 useState를 써서 관리 가능하다.

 

Nemo.js컴포넌트 생성

import React from 'react';

const Nemo = (props) => {

	return null;
 }
 
 export default Nemo;

App.js

import후 반환에 <Nemo/>만 불러와준다.

 

Nemo.js

 스테이트 만들기

 

이제 뷰를 만든다.

 

app.js 전체코드

import React from "react";
import Nemo from "./Nemo";


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 3,
    };
  }

  addNemo = () => {
    // 스테이트 고치기(중괄호 안에 수정하고싶은 state값 넣어줌)
    this.setState({count: this.state.count + 1});
    // 지금있는 state값에서 +1
  }

  removeNemo = () => {
    if(this.state.count > 0){
      this.setState({ count: this.state.count - 1 });
    } else {
      window.alert('더이상 네모가 없습니다!');
    }
    this.setState({count: this.state.count - 1});
  }

  render() {
    // 어떤수의 길이만큼 배열을 반환해주는 배열의 내장함수 사용
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);
    console.log(nemo_count);
    return (
      <div className="App">
        <Nemo/>
        
      </div>
    );
  }
}
export default App;

Nemo.js 전체코드

import React from 'react';

const Nemo = (props) => {
    const [count, setCount] = React.useState(3);
    // 대괄호 첫번째는 state로 쓸 변수명
    // 두번째는 count라는 값을 바꿔줄 함수
    // useState 괄호안에는 초기값이 들어감
    console.log('in nemo')
    console.log(count);

    // 추가, 빼기 버튼 함수
    const addNemo = () => {
        setCount(count+1); 
    }
    const removeNemo = () => {
        // 삼항연산자
        setCount(count > 0? count-1:0);
    }

    const nemo_count = Array.from({length: count}, (v, i) => (i));
    return (
        <div className="App">
        {/* count:3으로 state지정 후 뷰 만들기 */}
        {nemo_count.map((num, idx) => {
          return (
            // 리액트 요소 반환
            <div
              key = {idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#eee",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
        <button onClick={addNemo}>
          하나 추가
        </button>
        <button onClick={removeNemo}>
          하나 빼기
        </button>
      </div>
    );
  }


export default Nemo;