[typescript/react] component 함수형으로 정의해 파라미터 여러개 넘겨주기

typescript를 거의 처음 다뤄보는 도중에

지금 만들고있는 Box()라는 component에서

사용할 image src url을 파라미터형으로

넘겨주고 싶어졌다

 

그래서 옛날에 react에서 다뤄보던 방식대로

funtion Box(url: string, oneLine: string, name: string, introduction:string) {
	return (<img src={url} .../>);
};

const url1 = './img/1.jpg';
const box1 = Box(url, oneLine, name, introduction);

이런식으로 불러와서 호출해줬더니

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />. Did you accidentally export a JSX literal instead of a component?

 

이런 에러가 발생했다

 

gpt와 구글링을 동원해서 이것저것 알아봤더니

typescript에서 컴포넌트를

제대로 사용하기 위해선

컴포넌트를 함수형 컴포너트로 정의한 후,

JSX로 호출해야한다고 한다

 

따라서, 파라미터와 함께

컴포넌트를 함수형으로 정의하고

제대로 호출하기 위해서는

다음과 같이 코드를 작성해야한다

interface BoxProps {
    imgUrl: string;
    oneLine: string;
    name: string;
    introduction: string;
}

const Box: React.FC<BoxProps> = ({ imgUrl, oneLine, name, introduction }) => {
    return (
        <div className="box">
            <div className="image">
                <img src={imgUrl} alt="" width="600" height="300" />
            </div>
            <div className="content">
                <header className="align-center">
                    <p>{oneLine}</p>
                    <h2>{name}</h2>
                </header>
                <p>
                    {introduction}
                </p>
                <footer className="align-center">
                    <a href="#" className="button alt">Learn More</a>
                </footer>
            </div>
        </div>
    );
};

 

이렇게 Box 컴포넌트에 넘겨줄 파라미터를

interface로 정의한 다음

함수형 컴포넌트로 Box를 정의해준다

 

그 다음

내가 만든 컴포넌트가 들어가야할 부분에

export default function Projects() {
    const imgUrl1 = '/1.png';
    const oneLine1 = 'oneline';
    const name1 = 'name';
    const introduction1 = 'intro';
    
    return(
        <section className="resume-section" id="projects">
            <div className="grid-style">
                <Box
                    imgUrl={imgUrl1}
                    oneLine={oneLine1}
                    name={name1}
                    introduction={introduction1}
                />
            </div>
        </section>
    );
};

위와 같은 형식으로

파라미터와 함께 컴포넌트를 불러와 줄 수 있다

 

이런 다음 build해서 확인해보면

컴포넌트가 제대로 들어간 것을 확인할 수 있다