POOL:US ) 만든이들 (Component, Props)

리액트는 레고를 만들듯이 하나의 블럭들을 끼워맞추는 형태다.
긴 코드들을 작은 조각으로 분리하여 사용할 수 있다는 것이다.
리액트에서는 이를 컴포넌트화 한다고 표현한다.

컴포넌트와 프로퍼티를 유용하게 사용한 페이지가 '만든이들'페이지라고 생각한다.

이 페이지 안의 한 사람을 표현하는 박스는 하나의 컴포넌트 안에 값만 바꿔 표현한 것이다.

Component

<div className="people">
    <div className="likelion">
        <div className="pertitle">
            <img className="smlogo" src="img/logo/likelion.png" alt="멋사로고" />
            <div className='llblue'>성결대학교 멋쟁이사자처럼 11기</div>
            <div className='instagram'><a href="https://www.instagram.com/likelion_sku/" target='_blank' rel="noopener noreferrer"><FaInstagram /> likelion_sku</a></div>
        </div>
        <div className="gridpeople">
            <Person id={6}/>
            <Person id={7}/>
            <Person id={8}/>
            <Person id={9}/>
        </div>
    </div>
    <div className="renew">
        <div className="pertitle">
            <img className="smlogo1" src="img/logo/renewlogo.png" alt="리뉴로고" />
            <div className='renewyellow'>RE:NEW 총학생회</div>
            <div className='instagram'><a href="https://www.instagram.com/sku_39th_renew/" target='_blank' rel="noopener noreferrer"><FaInstagram /> sku_39th_renew</a></div>
        </div>
        <div className="gridpeople">
            <Person id={1}/>
            <Person id={5}/>
            <Person id={2}/>
            <Person id={3}/>
            <Person id={4}/>
        </div>
    </div>
</div>

위 사진의 전체 페이지를 구성하는 코드이다.
잘보면 각 개인은 의 컴포넌트로 구성되어 있다.

Person 컴포넌트가 작은 한 조각이 되는 것이다.
Person 컴포넌트 안에도 약 30줄 정도의 코드가 있는데
이를 컴포넌트화 하지 않고 작성한다면 한 파일에 300~400줄이 넘는 코드가 작성된다.

그렇게 작성하면 정말 최악의 가독성 파티,,
아무튼 이렇게 각 개인을 컴포넌트화 시켜서 간단하게 표현했다.

컴포넌트 화를 하는 이유는
1. 컴포넌트를 작은 조각으로 분리하여 다른 부분에서 재사용할 수 있다.
2. 컴포넌트는 독립적으로 관리되므로, 수정 또는 유지보수가 필요한 경우에 해당 컴포넌트만 수정하면 된다.
3. 컴포넌트 간에 프로퍼티(Props)를 사용하여 데이터를 전달할 수 있다.
이렇게 많은 장점들이 있기 때문~!

그러면 컴포넌트 옆에 있는 저 id={1} <- 요건 뭐냐면
바로 프롭스(Props)라는 거다.

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고,
전달받은 컴포넌트에서 해당 데이터를 사용할 수 있는 것

컴포넌트화해서 사용할 때 데이터가 연결되어야 더 효율적으로 관리할 수 있다.
나는 json형태로 사람들의 정보를 저장하고 각 사람들에게 id를 달아주어 구분했다.

위의 코드 안에서 person 컴포넌트를 사용했기 때문에
person 컴포넌트는 자식 컴포넌트가 되는 것이다.
해당 파일은 부모 컴포넌트이고, 부모 컴포넌트는 id로 N의 값을 전달한다.

Person.js

function Person({id}) {
  return (
    <div className="pbox">
        {Person.map(person => (
            (person.id === id) && (
            <div key={person.id}>
                    <img className="Pimg" src={person.image} alt="personimg" />
                    {/* <img className="Pimg" src="img/about/minjo.png" alt="personimg" /> */}

                    <div className="Pinfo">
                        <img src={person.logo} alt="personimg"/>
                        <div className='name align-middle'>{person.name}</div>
                    </div>

                <div className="Pdepart">{person.department}</div>
                <div className="Pposi">{person.position}</div>
                <div className='Prole'>{person.role}</div>
            </div>
        )
      ))}
    </div>
  )
}

자식 컴포넌트인 Person.js에서는 Person({id}) 이런 형태로 값을 받아와 사용할 수 있다.

1. json 형태로 저장되어있는 개인의 정보를 가져오고
2. 부모 컴포넌트에서 받아온 id와 일치하면
3. id를 가진 각 개인의 정보를 렌더링하는 방식으로 구현했다.