[React]컴포넌트

컴포넌트

• 독립적이고 재사용 가능한 코드 블록
• UI를 작은 조각으로 나눔
• 리액트는 컴포넌트의 조합임!
• 다른 컴포넌트를 조합하여 새로운 컴포넌트를 만들 수 있음 → 컴포넌트 합성

선언 방법

1. 클래스형 컴포넌트

   • 항상 extends React.Component를 해야함.
   • render()이후 return 값을 줘야함.
   • Hook의 등장 이후 잘 사용하지 않게 되었지만, 코드를 보고 읽을줄 알아야함.

   class Introduce extends React.Component{
   	render(){
   		return <h2>Hello, I'm Lily</h2>;
   }}

2. 함수형 컴포넌트

   • Hook과 함께 사용되는 리액트에서 권장되는 컴포넌트 선언방식

   function Introduce(){
   return <h2>Hello, I'm Lily</h2>;
   }

⇒ 컴포넌트의 이름은 항상 대문자로 시작해야함.
(렌더링시 기존 html 태그와 구분하기 위함임.)

props 사용하기

• props를 이용하여 function의 매개변수 처럼 사용할 수 있음.
• props의 값은 변경이 불가능함.

1. 클래스형 컴포넌트에서 이용하기

   • this를 이용하면 해당 클래스에 할당된 props를 가져올 수 있음.

   class Introduce extends React.Component{
   	render(){
   		return <h2>Hello, I'm {this.props.name}</h2>;
   }}
   
   const element=<Introduce name="Lily"/>

2. 함수형 컴포넌트에서 이용하기

   • 매개변수로 props를 선언해준 뒤, 컴포넌트 사용시에 name="Lily"를 넘겨주면
     {props.name}에 데이터가 할당됨.

   
   function Introduce(props){
   return <h2>Hello, I'm {props.name}</h2>;
   }
   const element=<Introduce name="Lily"/>

컴포넌트 합성하기

• 다른 컴포넌트를 이용하여 새로운 컴포넌트 만들기
• 잊지말자 여러개의 태그를 사용할 땐 최상위 태그(부모태그)써주는것을‼️
  ⇒ <> </> 로 감싸줘도됨!

function Student(props){
return <h3>학생의 이름은 {props.name}입니다.</h3>
}

function StudentList(){
return(
<div>
	<Student name="Lily";/>
	<Student name="Monika";/>
	<Student name="Aikey";/>
	<Student name="LeeJung";/>

</div>
);
}

객체를 props로 받기

• 객체를 props로 받아보자.
• 사용방법은 비슷하다. props.속성이름 으로 값을 가져오면된다.

const lily={
	age : 20,
	crew:'Hook',
	favoriteColor:'blue'
};

function Profile(props){
return(
	<>
		<h2>나이 : {props.age}</h2>
		<h2>크루 : {props.crew}</h2>
		<h2>좋아하는 색 : {props.favoriteColor}</h2>
	</>
);}

const lilyProfile = <Profile age={lily.age} crew={lily.crew} favoriteColor={props.favoriteColor}/>;

KDT Alice AI Track 수강하면서 들은 수업을 바탕으로 만들어진 게시물 입니다.