[React] props 같은 UI, 서로 다른 글자

📌props란 ?

• properties의 줄임말이고, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다

📌naver 메인을 react로 구현한다고 가정했을 때

• 아이콘만 각자 다르고 UI는 똑같기 때문에 아래 예시처럼 표현해줄 수 있다

//Button 컴포넌트 
const Button = () => { 
  return (
  <div>
    <button >클릭</button>
   </div>
  );
};
export default Button;

//App 컴포넌트 (버튼 컴포넌트 사용 시 상단에 불러와야 함)
function App() { 
  return (
    <div className="App">
     <Button/>
     <Button/>
     <Button/>
    </div>
  );
}
export default App;

이렇게 쓰게 된다면 화면에 같은 UI, 같은 텍스트로 만들어진 것을 볼 수 있다 안에 있는
"클릭" 글자만 변경하고 싶을 때는 props를 전달해서 변경해줄 수 있다

//App 컴포넌트
function App() {
  return (
    <div className="App">
     <Button text="메일" /> //값을 전달할 수 있음
     <Button text="카페" />
     <Button text="블로그" />
    </div>
  );
}
export default App;

버튼 컴포넌트들이 프롭스로 전달 받아서 화면에 렌더링이 될 수 있도록 프롭스를 전달해줘야 하는데
아래 예시를 보면 ...

//Button 컴포넌트 
const Button = (props) => { 
console.log(props) // {text: '메일'}, {text: '카페'}, {text: '블로그'}, 
  return (
  <div>
    <button>{props.text}</button> // 객체이기 때문에 점 표기법으로 접근 가능
   </div>
  );
};
export default Button;

버튼 컴포넌트의 매개변수로 프롭스를 전달 받는다 이때 객체로 전달 받기 때문에 . 표기법을 사용해서 접근을 해야 한다 이처럼 글자만 다르게 표현된 걸 확인 할 수 있다

📌 점표기법을 사용해서 접근해도 되지만 더 편리한 방법이 있다

• 객체 구조분해 문법 이용

//Button 컴포넌트 
const Button = ({text}) => { 
  return (
  <div>
    <button>{text}</button> 
   </div>
  );
};
export default Button;

매개변수 위치에 {} 중괄호를 열고, {text} 프로퍼티의 값을 바로 꺼내오도록 설정해주면
점 표기법 사용했던 것과 동일하게 똑같이 렌더링 되는 것을 확인할 수 있다

📌 props가 여러개 있을 때

   const buttonProps = {
    text: '메일',
    a: 1,
    b: 2,
    c: 3,
   }

객체를 따로 만들어주고

<Button {...buttonProps}/> //스프레드 연산자 사용해서 전달해 줄 수도 있음

버튼 프롭스 객체에 들어있는 이 프로퍼티의 값들을 각각 개별로 버튼 컴포넌트의 프롭스로 전달을 해주게 된다

📌 defultProps

• 3개의 버튼컴포넌트 중 1개만 style 속성을 가지고 있고, 그게 프롭스로 clolr: {"red"}라고 가정했을 때
  

//Button 컴포넌트 
const Button = ({text}) => { 
  return (
  <div>
    <button sytle={{color:color}}>{text}</button> 
   </div>
  );
};
export default Button;

카페, 블로그는 color 값이 없기 때문에 검은색으로 표현된 걸 확인할 수 있다
이처럼 프롭스로 color라는 값이 무조건 들어올 거라고 예상하고 작성해버리면 치명적인 오류가 발생할 수 있다

✔️ 이럴 땐 기본 값을 설정해주면 된다

Button.defaultProps = {
  color: "black", //따로 색상을 지정해주지 않아도 기본값이 검정색이기 때문에 undefined가 나오지 않는다
};