Next 15장 - props type

Next

Next

Next.js

TypeScript

• redux, recoil 등을 이용하여 전역적으로 상태를 관리할 때도 있지만, 전연적으로 관리하는 상태값을 제외하곤 drilling이 일어나지 않는 선에서 props를 간편하게 사용한다.
• typescript를 사용할 때는 전달되는 props의 데이터 타입도 올바르게 지정을 해줘야 하는데, 자세한 개념을 모르고 사용은 해왔으나, 개념에 대해 추가적으로 작성해보고자 한다.

function ParentExample(){
    const [data, setData] = useState<ExampleType>();

    useEffect(() => {
        axios.get("/data").then(res => setData(res.data)).catch(err => console.log(err));
    }, [])

    return(
        <Container>
            <ChildExample props={props}/>
        </Container>
    )
}

function ChildExample(/*여기서 props를 사용*/){
    const {example1, example2} = props;

    return (
        <div>{example1.data}</div>
    )
};

• 위와 같은 형식으로 자식 컴포넌트에서 부모 컴포넌트에게 props를 전달받는다고 가정한다.
• 이때, props에 대한 데이터 타입을 지정해줘야 하는데, 타입 지정 방법으로 검색했을 때 나오는 일반적인 지정 방법은 아래와 같다.

function ChildExample({ props }: { props: ExampleArray }) {}

• 이렇게 지정되는 타입에 대해 잘 모르고 사용해왔고, 이에 대한 추가 설명은 이러하다.
• 만약 props로 전달받는 데이터가 example1,example2라는 키를 갖고 있는 객체라고 한다면, 키를 가진 객체에 대한 타입을 직접 명시하는 방법을 사용할 수 있다.

function ChildExample({ example1, example2 }: ExampleArray) {}

• 흔히 할 수 있는 실수가 객체를 그대로 넘겨받을 것을 생각하여 (prop: ExampleArray){}라고 작성한다면, prop라는 키를 가진 데이터를 특정 짓는 것과 같다.
• 위 방법을 사용하고자 한다면 데이터를 모두 넘겨줄 때 spread연산자를 사용하여, 넘어오는 데이터 자체에 대한 타입을 규정해주어야 한다.

<ChildExample {...props} />;

function ChildExample(props: ExampleArray) {}

• 또 다른 방법은 가지고 있는 데이터를 모두 풀어서 작성하는 것이다.

<ChildExample {...props}/> // 가능
<ChildExample example1={props.example1} example2={props.example2}/>

function ChildExample({example1, example2}:ExampleArray){}

• 작성된 형태를 보면 props 전부를 넘겨주어 이 안의 데이터를 구조분해할당하여 따로 사용하느냐, spread문법으로 넘겨준 모든 데이터를 사용하느냐, 형태를 유지하며 데이터를 직접적으로 명시하여 사용하느냐 등의 차이이지만 근본은 같다.