[TIL] Day48 - 리액트 3 Todo 상태관리

props

메인 App 파일이 아닌, 특정 데이터를 컴포넌트끼리 정보를 공유해야 할때, 매개변수를 통해 전달하는 형태를 props 라고 한다.

React.FC<타입> : 함수에 전달되는 인자 props의 타입을 선언하는 명령어. children Props의 타입 체킹이 명확히 되지 않는다는 단점이 있다. (기본적으로 children Props가 옵셔널 형태로 들어가 있으니 확실히 children이 있어야 하는지 없어야 하는지 명확히 타입 체킹이 되지 않는다는 점)

import React from "react";

interface MyProps {
  weather: string;
  children: React.ReactNode;
}

const MyWeather: React.FC<MyProps> = (props) => {
  return (
    <div>
      {props.children} <p></p>
      오늘의 날씨는 {props.weather} 입니다.
    </div>
  );
};

export default MyWeather;


//App.tsx
<MyWeather weather="맑음">일기예보</MyWeather>

App.tsx 컴포넌트 호출 사이에 값 : 자식 children props

사용하려면 children property 값 `React.ReactNode`을 interface 에 선언해주어야 한다.

 

반복되는 props 형식은 객체 구조분해할당으로 해결할 수 있다.

`const {children, weather} = props;`  또는 함수전달인자 props 대신에 `{children, weather}`

 

class 사용

this는 객체지향언어에서 대부분 사용된다. 함수에서 누가 어디서 호출했는지 파악하기 위해 지정해준다.

class MyWeather extends Component<MyProps> {
  render() {
    const { children, weather } = this.props;
    return (
      <div>
        {children} <p></p>
        오늘의 날씨는 {weather} 입니다.
      </div>
    );
  }
}

 

모달 대화상자

Modals | React Bootstrap

show, hide 를 이용하기

<Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>Todo 상세정보</Modal.Title>
        </Modal.Header>
        <Modal.Body>{todo?.text}</Modal.Body>
      </Modal>

옵셔널 체이닝 ? : 값이 존재하니 않는 경우 에러가 아닌 undefined 를 출력, 렌더링하지 않겠다.`{todo?.text}`

 

props로 show 타입 상태관라하기 > 함수도 props 로 넘길 수 있다.

type TodoModalProps = {
  show: boolean;
  todo: Todo | null;
  handleClose: () => void;
};

 

TodoModal 컴포넌트 사용할때, 넘길 상태값들 작성해주어야 한다.

<TodoModal
        show={showDetail}
        todo={selectedTodo}
        handleClose={handleCloseDetail}
      ></TodoModal>

 

과정 마무리

웹 개발이 아닌, 개발자가 되기 위해 객체지향 등 다양한 개념과 원리와 같은 본질을 이해해야 한다.

로직과 기능 구현에 집중하고, 조화롭게 구성하는 패턴을 이해해야 한다.