1114 props 사용, Modal 대화 상자를 이용한 상세정보 구현

props의 사용

• React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달. 이 객체를 “props”라고 한다.
• 일반함수의 매개변수 개념
• 컴포넌트 기반의 속성 데이터 교환 형태

좋은 점

• 데이터가 고정되지 않고 동적으로 변화 가능

props 받기

• interface 정의하여 React.FC의 제너릭 타입으로 지정
• React.FC 를 사용하면 함수형 컴포넌트의 props 타입을 지정할 수 있으며, 기본적으로 childeren 프로퍼티를 포함한다.
• children : 사용자 정의 컴포넌트의 자식 요소를 말한다. 타입은 React.ReactNode

React.FC는 FunctionComponent의 줄임말로, React와 TypeScript를 함께 사용할 때 함수형 컴포넌트의 타입을 지정하기 위해 사용된다. 이는 props 타입을 간결하게 표현해 주고, 자동으로 children prop에 대한 타입(ReactNode)을 포함하는 기능을 한다.

interface MyProps{
    weather : string;
    children : React.ReactNode; // 리액트의 자식요소
}

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

 

props 보내기

• 속성 (어트리뷰트) : 속성명 = '속성값'
• children : <Component>칠드런 값</Component>

<MyWeather weather='맑음'>일기예보</MyWeather>

• 구조분해 할당

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

//=====OR========//

const MyWeather : React.FC = ({children, weather}) => {

 

클래스 컴포넌트

• this 사용
  • 호출한 객체를 알 필요가 있을 떄

// 클래스 컴포넌트  
class MyWeather extends Component{  
    render(){  
        // this는 컴포넌트를 호출한 대상 객체 : App.tsx의 MyWeather  
        const {children, weather} = this.props;
        return(
            <div>
                {children}<p></p>
                 오늘의 날씨는 {weather}
            </div>
	)
}

 

---

 

모달 대화상자를 이용한 상세정보 구현

• TodoModals 타입 지정 : 함수 또한 props로 넘겨주기 가능

import React from "react";  
import {Modal} from 'react-bootstrap';

type Todo = {  
    id : number;  
    text : string;  
    isChecked : boolean;  
};

type TodoModalProps = {
    show : boolean;
    todo : Todo | null;
    handleClose : ()=> void;    // 함수 props로 넘겨주기 가능
}

const TodoModal : React.FC<TodoModalProps> = ({show, todo, handleClose}) => {
    return(
        <div>
            <Modal show={show} onHide={handleClose} centered>
                <Modal.Header closeButton>
                    <Modal.Title>Todo 상세 정보</Modal.Title>
                </Modal.Header>
                <Modal.Body>{todo?.text}</Modal.Body>
            </Modal>
        </div>
    )
}

export default TodoModal;

 

• todolist에 모달 띄우기 - props 전달

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

 

[이슈]
1) 에러

webpack compiled with 1 warning ERROR in src/Todolist.tsx:111:25 TS2322
: Type '(todo: Todo) => void' is not assignable to type '() => void'. 
109 | <TodoModal show={showDetail} 110 | todo={selectedTodo} > 
111 | handleClose={handleCloseDetail}> | ^^^^^^^^^^^ 112 | 113 | ) 114 | }

 

2) 원인 : TodoModal 컴포넌트의 handleClose props 타입 정의와 실제로 넘겨주는 함수의 타입이 다르기 때문에 발생

• 넘겨준 함수 타입: (todo: Todo) => void
• 기대하는 타입: () => void

3) 해결

// 상세정보 창 닫기  
const handleCloseDetail = (todo : Todo) => {  
setShowDetail(false);  
}

⬇️

const handleCloseDetail = () => {  
setShowDetail(false);  
}

 

---

React.FC의 개념과 기능을 알아보기 위해 검색을 해봤는데 React.FC의 사용을 지양하는 추세하고 한다. 왜 그런 건지 공부해서 따로 정리해봐야겠다.