[React] Component

🧩 컴포넌트

컴포넌트는 UI를 개별적인 조각으로 쪼개고 관리 및 재사용성이 용이한 리액트의 핵심 기술중 하나입니다.

---

🏭 Class로 만드는 컴포넌트

예전에는 컴포넌트를 만들때 class를 이용하여 만들었습니다.

 

그렇게 때문에 function으로 만드는 컴포넌트와 달리

 

class로 만드는 컴포넌트만의 몇가지 특이점이 있습니다.

1. 항상 React.Component를 상속받아 만들어집니다.
2. consturctor는 props를 전달할때만 작성합니다.
3. render와 state같은 메서드나 객체가 상속되어 들어옵니다.

class Welcome extends React.Component{
    constructor(props){
        super(props)
    }

render (){
return <div>`Hi! ${name}`<div>
}
}

---

🎩 function으로 만드는 컴포넌트

리액트가 발전해오면서 함수형 컴포넌트의 등장으로 class의 단점들이 개선되었습니다.

 

현재 리액트 19에서도 함수로 컴포넌트를 만드는것을 권장하고 있습니다.

 

아래 코드는 컴포넌트를 만들 수 있는 기본적인 코드입니다.

function Components(props){
    return(
        렌더링할 HTML
    )
}

---

🐤 컴포넌트 사용하기

컴포넌트는 일종의 UI 조각이라서 한 페이지에서 많이 만들어 두고 사용하면 해당 파일의 가독성이 안좋아집니다.

 

그렇기 때문에 보통 폴더를 만들어서 관리하게 되는데요.

 

자바스크립트에서 모듈사용하듯 import export구문을 통하여 관리하게 됩니다.

 

이때 return문 안쪽에는 하나의 부모안에서 태그가 만들어져야합니다.

 

보통 의미없는 부모요소를 만들어줄때 Fragment라는 의미없는 태그를 사용합니다

function Components(){
    return(
        <> // Fragment
          <div> React <div>
        </>
    )
}

export default Components

 

컴포넌트를 폴더에서 export했다면 해당 컴포넌트를 쓸 파일에서 import를 해옵니다.

 

컴포넌트를 사용할때는 <컴포넌트 이름/>으로 셀프클로징태그를 사용합니다

 

// App.js
import Components from 'Component파일 경로'
.
.
function App(){
  return(
    <>
      <Components/>
    </>
  )
}

 

---

🐣 Props

Props는 상위 컴포넌트가 하위 컴포넌트에게 전달해주는 정보입니다.

 

props는 모든 값을 하위 컴포넌트에게 전달 할 수 있습니다.

 

컴포넌트를 전달하는 방법은 하위컴포넌트의 태그안에 전달할 정보를 넣으면 됩니다.

 

<Components id={id} name={name]/>

 

보통 컴포넌트를 전달할때 전달하는 내용과 중괄호 안의 내용을 일치시켜서 보내줍니다.

 

전달 받은 컴포넌트는 props라는 이름을 통해서 전달받습니다.

 

// Component

export default function Component(props){
  return(
    <div key={props.id}>
       <h2>{props.name}</h2>
    </div>
  )
}

 

그런데 사용하고보니 익숙한 모양새네요

 

Props는 리액트가 컴포넌트를 호출할 때 넘겨주는 객체입니다.

 

그렇기 때문에 props가 많아서 일일히 props.name같은거 하기 귀찮으면 구조분해할당으로 쉽게 사용할 수 있습니다.

 

// Component

export default function Component({id,name}){
  return(
    <div key={id}>
       <h2>{name}</h2>
    </div>
  )
}