props 사용법
props 는 속성 이라고 볼 수 있다.
버튼 2개에 같은 스타일을 주고싶은데,
function SaveBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
}}
>
Save Changes
</button>
function Continue() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
}}
>
Continue
</button>
이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다.
저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다.
그래서 아예 Btn 이라는 컴포넌트를 만들어주고,
<Btn/>
컴포넌트 2개를 App 컴포넌트 안에 넣어준다.
function Btn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
}}
>
Save Changes
</button>
);
}
하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다.
<img src="">
하듯이 새로운 정보를 Btn 컴포넌트에 전송해줄 수 있다.
// text든 banana든 이름은 아무렇게 작성해도 상관없다.
<컴포넌트 이름 + 키값 = "값"
<Btn banana="Save Changes" />
<Btn banana="Continue" />
하지만 아직 변화는 없다.
왜냐하면 아직 Btn컴포넌트는 "banana" 라는 키값을 전달받지 않았기 때문이다.
알아야 할 건,
모든 컴포넌트는 "()" 괄호로 파라미터를 받는다는 것.
이름은 보통prop
라 한다.
Btn으로부터 전달받는 properties 인 것.
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue" />
위의 두 컴포넌트의 의미는
Btn({banana: "Save Changes"})
Btn({banana: "Save Changes"})
와 같다.
Btn함수를 불러와 banana 라는 인자를 보내는 것과 같은 의미.
</div>
function Btn(props) {
console.log(props);
return (
...
...
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue" />
</div>
);
}
위 코드를 토대로 콘솔창을 보면
이렇게 각 Btn의 props는 우리가 넣은 것들을 모두 가진 Object 형태로 나타나는 것을 볼 수 있다.
props 사용법 2가지
1.
function Btn(props) {
console.log(props);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
}}
>
{props.banana}
</button>
);
}
function App() {
return (
<div>
// 작명은 아무렇게나 가능
<Btn banana="Save Changes" />
<Btn banana="Continue" />
</div>
);
}
부모 컴포넌트에 자식 컴포넌트를 원하는 위치에 넣고, 키값을 지정해주고,
자식 컴포넌트(Btn)의 인자에 "props"를 해주고,
자식 컴포넌트에서 인자가 전달되기를 원하는 곳에
"{props.인자}" 를 작성해준다.
2. 더욱 간단하게 사용하는 법
// props 는 Object 이기 때문에 중괄호로 감싸준다.
// 그리고 Object로부터 banana를 받는다.
// 즉 property(여기선 banana)를 Object로부터 꺼내오는 것
function Btn({ banana }) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
}}
>
// props 써줄필요없이 그냥 banana만 작성
{banana}
</button>
);
}
2가지 방법 모두 잘 작동한다.
아래와 같이 props는 여러개도 사용해줄 수 있다.
인자 자리, 그리고 컴포넌트에 정보 입력하는 부분에 추가해주면 된다.
function Btn({ banana, text }) {
return (
console.log(banana, text)
// Save Changes big 출력
// Continue undefined 출력
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
fontSize: text ? 18 : 16,
// 🟡위와 같이 props를 활용해 조건문을 사용할 수도 있다.
}}
>
{banana}
</button>
);
}
function App() {
// React에서는 for 사용불가능. class대신 className쓰듯
return (
<div>
<Btn banana="Save Changes" text="big" />
<Btn banana="Continue" />
</div>
);
}
props를 활용해 style 안에서도 if/else를 사용해서
적용 잘 된다.
Author And Source
이 문제에 관하여(props 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnjswn123/props-사용법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)