리액트를 다루는 기술 #3 컴포넌트

컴포넌트

컴포넌트를 선언하는 방식은 두 가지이다.

1. 함수 컴포넌트
   ○ 클래스형 컴포넌트보다 선언하기가 편함
   ○ state와 라이프사이클 API의 사용이 불가능 (Hooks 기능 도입으로 어느정도 해결)
2. 클래스형 컴포넌트
   ○ render함수 필수, 그 안에서 보여 주어야 할  JSX를 반환해야 함
   ○ state 기능 및 라이프 사이클 기능 사용 가능, 임의 메서드 정의 가능

 

props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

 

//MyComponent.js

const MyComponent = (props) => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다.
      <br />
      children값은 {props.children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본 이름",
};

export default MyComponent;

 

//App.js

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

export default App;

 

1. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.
2. children은 컴포넌트 태그 사이의 내용을 보여 주는 props이다.

결과

 

 

비구조화 할당 (구조 분해 할당)

비구조화할당이란, 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말한다. 

const MyComponent = props =>{
	const {name, children} = props;
    return(
    	<div>
        	안녕하세요, 제 이름은 {name}입니다. <br/>
            children값은 {children}입니다.
         </div>
    )}

 

비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다.
배열의 경우 [ ]를 사용하고, 객체의 경우 { }를 사용한다.

 

위 코드를 해석하자면 '컴포넌트 함수의 파라미터로 props 값을 받아 와서 그 내부 값을 비구조화 할당 문법을 통해 추출하였다' 가 될 수 있다.

 

class MuComponent extends Component{
	render(){
    	const{ name, favoriteNumber, children } = this. props;
        return(
        ...

 

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다.

 

 

state

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

cf) props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 자신은 읽기 전용으로만 사용할 수 있다.

constructor(props) {
    super(props);
    this.state = {
      number: 0,
      fixedNumber: 0,
    };
  }

 

컴포넌트에 state를 설정할 때는 위와 같이 construrtor 메서드를 작성하여 설정한다.

 

이는 컴포넌트의 생성자 메서드이다. 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해야 한다. 

this.state 값에 초깃값을 설정한다.

 

state = {
    number: 0,
    fixedNumber: 0,
  };

 

construrtor 메서드를 선언하지 않고도 위와 같은 방법으로 state의 초깃값을 설정할 수도 있다.