TIL : Props/Props를 통한 동적 스타일링

✅ Props

 

🌼 props

React에서 컴포넌트 간 데이터를 주고받는 데 사용되는 객체

props라는 매개변수를 통해 외부에서 전달된 데이터를 받고 이를 사용하여 동적으로 화면을 구성하거나 다양한 작업을 수행

 

🌼 전달 방식

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, JSX에서 속성(attribute)으로 값을 넘겨줍니다. 자식 컴포넌트는 이 값을 props 객체로 받아서 사용

 

🌼 props 사용 예시

 

부모 컴포넌트에서 자식 컴포넌트로 Props 전달하기

// ParentComponent.jsx import React from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => {   // 데이터를 props로 넘김   const greeting = "Hello, World!";   return (     <div>       <ChildComponent greeting={greeting} />     </div>   ); } export default ParentComponent;

 

자식 컴포넌트에서 Props 사용하기

// ChildComponent.jsx import React from 'react'; const ChildComponent = (props) => {   // props에서 greeting 값을 가져와 사용   return (     <div>       <p>{props.greeting}</p>     </div>   ); } export default ChildComponent;

 

Props 객체: props는 JavaScript 객체. 자식 컴포넌트에서는 props 객체의 속성으로 전달된 데이터를 받는다. 위의 예시에서 greeting은 props 객체의 속성.

 

사용법: 자식 컴포넌트에서 props 객체의 속성을 사용할 때에는 props.속성명 형태로 접근. 예를 들어, props.greeting은 ParentComponent에서 넘겨준 데이터

 

---

 

✅ 프로젝트에 styled components로 적용하기

import Slider from '../components/main/slider'; import Navbar from '../components/NavBar'; import PickFlow from '../components/board/PickFlow'; const MainPage: React.FC = () => {   const pickFlowProps = {     justifyContent: 'space-around',     margin: '50px',     border: '1px solid #8D8BA7',     borderRadius: '10px',     padding: '20px',     textAlign: 'left',     color: '#353E5C',     fontSize: '35px',     fontWeight: 'bold',   };   return (     <>       <Navbar />       <Slider />       <PickFlow {...pickFlowProps} />     </>   ); }; export default MainPage;

 

pickFlowProps 객체는 PickFlow 컴포넌트에 전달될 props를 정의하는 객체

 

spread 연산자 사용하는 이유

React에서는 주로 객체(props)를 다른 컴포넌트에 전달할 때 사용

]; const PickFlow: React.FC<PickFlowProps> = ({   justifyContent,   margin,   border,   borderRadius,   padding,   textAlign,   color,   fontSize,   fontWeight, }) => {return( //아래 코드 )}

 

이렇게 전달해준다.

return (     <Container justifyContent={justifyContent} margin={margin}>       <Wrapper border={border} borderRadius={borderRadius} padding={padding}>         <Title textAlign={textAlign} color={color} fontSize={fontSize} fontWeight={fontWeight}>           WEEKLY BEST         </Title>         <BestList>           {BESTS.map((best) => (             <BestItem key={best.id}>               <div className="category">{best.category}</div>               <p>{best.title}</p>             </BestItem>           ))}         </BestList>       </Wrapper>       <Wrapper border={border} borderRadius={borderRadius} padding={padding}>         <Title textAlign={textAlign} color={color} fontSize={fontSize} fontWeight={fontWeight}>           MONTHLY BEST         </Title>         <BestList>           {BESTS.map((best) => (             <BestItem key={best.id}>               <div className="category">{best.category}</div>               <p>{best.title}</p>             </BestItem>           ))}         </BestList>       </Wrapper>     </Container>   );

 

해당 컴포넌트에 props를 통해 스타일을 전달

const Container = styled.div<PickFlowProps>`   display: flex;   justify-content: ${(props) => props.justifyContent || 'space-between'}; // props.justifyContent   값에 따라 동적으로 설정   margin: ${(props) => props.margin}; `;

 

 이런식으로 props를 활용하여 동적으로 속성을 결정