React 기초-State, Props

State

state: 계속해서 변화하는 특정 상태에 따라 각각 다른 동작을 함

ex) 어두운 테마로 바꾸는 모드처럼 상태가 계속 동적으로 바뀔 수 있는 것을 의미한다.

 

-버튼 누르면 증가 감소하는 코드

//상태를 사용하겠다라는 메소드를 import
import React, { useState } from "react";

const Counter = () => {
  // h2태그의 0은 1씩 증가 감소하는
  // count 상태라고 생각할 수 있다.

  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

상태를 사용하겠다는 메소드를 불러온다. 그리고 위 코드처럼 사용하면 버튼을 클릭할 때 마다. rerender되어 화면에 보여준다.

 

Props

props는 객체의 프로퍼티스의 줄임말이다.

 

위에서 한 count에서 초기값을 사용자가 지정한 것으로 하고 싶으면

-짧을 때

      <Counter initialValue={5} />

 

//상태를 사용하겠다라는 메소드를 import
import React, { useState } from "react";

const Counter = (props) => {
  // h2태그의 0은 1씩 증가 감소하는
  // count 상태라고 생각할 수 있다.

  const [count, setCount] = useState(props.initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

props를 인자값으로 넣어준다. props는 객체로 전달되어서 점표기법으로 사용하면된다.

 

-길때

 const counterProps = {
    a: 1,
    b: 1,
    initialValue: 5,
  };

  return (
    <div>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );

//상태를 사용하겠다라는 메소드를 import
import React, { useState } from "react";

const Counter = ({ initialValue }) => {
  // h2태그의 0은 1씩 증가 감소하는
  // count 상태라고 생각할 수 있다.

  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

{}를 사용해 initialValue를 가져와서 사용하면된다.

 

-만약 값이 비어있으면

//상태를 사용하겠다라는 메소드를 import
import React, { useState } from "react";

const Counter = ({ initialValue }) => {
  // h2태그의 0은 1씩 증가 감소하는
  // count 상태라고 생각할 수 있다.

  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

이런식으로 Counter.defaultProps를 만들어서 기본으로 0이 들어가게끔 한다.

 

-홀수짝수 결과 출력

<OddEvenResult count={count} />

이렇게 하고

const OddEvenResult = ({ count }) => {
  console.log(count);
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;

OddEvenResult.js 파일을 만들어서 연동하면 짝수인지 홀수인지 알 수 있다.

 

-css 적용

    <Container>
      <div>
        <MyHeader />
        <Counter {...counterProps} />
      </div>
    </Container>

const Container = ({ children }) => {
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
      {children}
    </div>
  );
};

export default Container;

이렇게 만들어주면 children이 위 코드의 Container 안에 있는 코드들이 되고 css가 적용된다.

 

결과