Component, Props

🖥️ Component

component의 사전적 정의는 독립적이고 재사용 가능한 코드 비트이다. JavaScript 함수와 동일한 목적을 제공하지만 분리되어 작동하고 HTML을 반환한다.

 

component는 클래스 구성 요소와 함수 구성요소의 두 가지 유형으로 제공된다.

 

📌 컴포넌트를 만들 시 주의사항
- 컴포넌트의 이름은 반드시 첫 글자가 대문자로 시작해야 한다. 대문자로 시작하지 않으면 HTML태그로 분류해 버리기 때문에 에러를 일으킨다.

 

⌨️ 함수형 컴포넌트(Stateless Functional Component)

• 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다.
• export 구문은 작성한 component 파일을 다른 파일에서 import 할때 불러올 수 있도록 정의해주는 부분이다.
• import 시 js, jsx 등 파일 확장자를 생략해도 자동으로 찾을 수 있다. "웹팩 코드 검색 확장자" 기능 때문이다.
  확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트한다.

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

 

⌨️ 클래스형 컴포넌트

• 컴포넌트 구성 오소, 리액트 생명주기를 모두 포함하고 있다.
• 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

 

⌨️ 컴포넌트 활용

 

컴포넌트를 활용 예시는 위 화면 처럼 같은 방식에 박스가 여러개 쓰일 때 사용한다. 즉 재사용이 가능하다는 것이다.

import React from 'react'
const Box = () => {
  return (
    <div>Box</div>
  )
}
export default Box

위 코드처럼 컴포넌트를 만들고 

import React from 'react'
import Box from '.component/Box';

function App() {
  return (
    <div>
      <Box/>
      <Box/>
      <Box/>
    </div> //jsx 신택스에서 주의할점. 반드시 하나로 묶어야한다.
  );
}

컴포넌트를 임포트 시키면 된다.

 

❌ jsx 신택스에서 주의할점은 반드시 하나로 묶어야 한다.

import React from 'react'
import Box from '.component/Box';

function App() {
  return (
    <div>
      <Box/>
      <Box/>
      <Box/>
    </div>

    <div>
      <Box/>
    </div>
  );
}​

위 코드와 같이 하나에 태그안에 들어가 있지 않으면 에러가 난다.

 

🖥️ Props

프로퍼티, props(properties의 줄임말)라고 한다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용되며 단방향 데이터 흐름을 갖는다. 프로퍼티는 수정할 수 없다는 특징이 있다.

import React from 'react'
import Box from '.component/Box';
>
function App() {
  return (
    <div>
      <Box name="난 박스1" num={1}/>
      <Box name="난 박스2" num={2}/>
      <Box name="난 박스3" num={3}/>
    </div>
    >
    <div>
      <Box/>
    </div>
  );
}

 

컴포넌트 파일에서 다음과 같이 수정하면 Props를 전달 받게 된다.

import React from 'react'

const Box = (props) => { //props는 함수의 매개변수와 같은 존재이다.
  return (
    <div className='box'>
        Box{props.num} //props의 num값을 받는것이다.
        <p>{props.name}</p>
    </div>
  )
}

export default Box;

 

Box 컴포넌트에 name과 num의 속성을 넣었다. 이 속성을 받는 것이 props이다. 함수의 매개변수와 같은 존재와 같다. 그래서 props로 인해 다이나믹 한 값을 지정해 줄 수 있다.

 

props.num은 Box 컴포넌트에 할당한 num 속성 값이 지정 되는 것이고 props.name은 Box 컴포넌트에 할당한 name 값이 지정 되는 것이다.