[React] 컴포넌트 활용 - props

1. Components

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러조각으로 나누어 사용.
컴포넌트 이름은 항상 대문자로 시작.

2. props

프로퍼티, props(properties의 줄임말)
상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용

components/ProjectWrap.js

const ProjectWrap = (props) => {
    return (
       <>
        <a src={props.projectLink} target="_blank"/>
        <div className="thumbnail">
            <img src={props.thumbnailImgUrl} />
        </div>
        <div className="info">
            <p>{props.title}</p>
            <span>{props.tag}</span>
        </div>
       </>
    )
}
export default ProjectWrap;

page/Main.js

import ProjectWrap from '../components/main/ProjectWrap';

const Main = () => {
    return (
      <>
       <ProjectWrap
        projectLink = "www.naver.com"
        thumbnailImgUrl = "www.naver.com"
        title = "테스트 프로젝트 제목"
        tag = "# React , # Sass , # gsap"
        />
      </>
    );
  };
  
  export default Main;

[실무 적용 일지]

컴포넌트와 props 사용하기1

컴포넌트와 props 사용하기2 : 컴포넌트안에 페이지 별 다른 내용 넣기, 컴포넌트 스타일 다르게 하기