728x90
점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라..
React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다..
Props란
-컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다.
-Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다.
예시를 들어보겠다
//Parent.js
import React from "react";
import Child from "./Child";
const Parent = () => {
const animal = "호랑이";
//호랑이라는 문자열을 변수에 담아서 관리하고있으며,
//해당 변수를 이용해서 화면에 '호랑이'가 보이도록 표현했다.
return (
<>
<h1>부모 컴포넌트 입니다.</h1>
<p>{animal}</p>
<Child />
</>
);
};
export default Parent;
Child 컴포넌트에 똑같이 '호랑이'라는 문자열을 표현하고 싶다면 어떻게 해야할까?
Parent 컴포넌트에서 했던것과 같이 변수를 생성하여 그 변수를 이용하는 방법도 있지만,
이미 선언한 부분이 중복되는 비효율적인 방법이니 Props를 이용해 보겠다.
일단, Props의 정의를 생각해보면 Props 는 컴포넌트의 속성값이라 했으니,
전달할때는 자식컴포넌트인 Child 컴포넌트 부분에 tag에 속성을 주입하듯 속성을 넣어주는 방법으로 전달하면 된다.
//Parent.js
return (
<>
<h1>부모 컴포넌트 입니다.</h1>
<p>{animal}</p>
<Child tiger={animal} />
</>
);
};
//tiger라는 그릇에 animal 이라는 변수를 담아 전달한다.이 데이터를 자식 컴포넌트에서는 어떻게 이용할까?
함수에서 인자를 받아서 사용하듯이
함수 컴포넌트 역시 매개변수를 설정하여 부모컴포넌트에서 보내준 데이터를 받아서 사용할 수 있다.
이때, 부모 컴포넌트가 전달해준 데이터는 하나의 {} 객체로 합쳐져서 자식 컴포넌트로 전달된다.
//Child.js
import React from "react";
const Child = (props) => {
//여기서 매개변수의 이름은 함수에서 사용하는것 처럼 마음대로 가능하지만,
// 부모 컴포넌트로 받은 propsf를 표현하는것을 보여주기위해 props로 적었다.
return (
<>
<h2>자식 컴포넌트 입니다.</h2>
<p>{props.tiger}</p>
</>
);
};
export default Child;tiger라는 이름으로 객체를 선었했고, props로 받기 때문에 {props.tiger}로 부모컴포넌트로부터 잘 받아온것을 확인할 수 있다.
그렇다면 함수는 어떻게 전달해줄까?
부모컴포넌트 콘솔창에 메세지를 띄우는 함수를 만들어 보았다.
Parent.js
const testConsole = () => {
console.log("이것은 테스트다!")
}
//해당 testConsole 이라는 함수는 console창에 메세지를 출력하는 함수이다.
return (
<>
<h1>부모 컴포넌트 입니다.</h1>
<p>{animal}</p>
<button onClick={testConsole}>테스트</button>
<Child tiger={animal} />
</>
);
};
//<button/>을 만들어 클릭하면 testConsole 함수가 실행되게 만들었다.
부모 컴포넌트에 있는 이 함수를 이제 자식 컴포넌트에서 똑같이 사용해보자.
Parent.js
return (
<>
<h1>부모 컴포넌트 입니다.</h1>
<p>{animal}</p>
<button onClick={testConsole}>테스트</button>
<Child tiger={animal} test={testConsole} />
</>
);
};
//<button/>을 만들어 클릭하면 testConsole 함수가 실행되게 만들었다.
//test라는 그릇에 콘솔메세지를 출력하는 함수를 담아주었다.
그리고 Child 컴포넌트에 가서 props로 전달해 준다.
Child.js
...
return (
<>
<h2>자식 컴포넌트 입니다.</h2>
<p>{props.tiger}</p>
<button onClick={props.test}>테스트</button>
</>
);
};
export default Child;
부모 컴포넌트에서 설정한 함수가 바로 잘 실행되는것을 확인할 수 있었다.
이렇게 정리를 해 보면서 계속 쳐 보니 이해가 잘 갔다.
react를 물 흐르듯 잘 활용할 수 있는 그날까지..
ㅎㅇㅌ..
728x90