리액트 뽀개기(2)

저번에는 간단하게 JSX에 대해서 알아봤다. 

 

이번엔 props이다

 

props는 읽기 전용으로 수정할 수 없다고 한다. 사용해보자.

//ex1.js 

import React from 'react';

class Ex1 extends React.Component {
    render(){
        return <h1>안녕하세요. { this.props.name }님</h1>;
    }
}
export default Ex1;

간단하게 ex1.js에서 만들었다. 

 

이것을 App.js에서 사용할 것이다. 

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Ex1 from './ex1'; 

function App() {
  return (
    <Ex1 name='js' />
  );
}

export default App;

먼저 사용할 파일을 import 한다.  <사용할 컴포넌트  속성=내용>으로 사용할 수 있다.  

위와같이 출력

 

또 컴포넌트는 출력될때 다른 컴포넌트를 참조할 수도 있으며 여러 개를 할 수도 있다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Ex1 from './ex1';

function App() {
  return (
    <div>
      <Ex1 name='js' />
      <Ex1 name='j' />
      <Ex1 name='s' />
    </div>
  );
}

export default App;

아래와 같은 결과를 얻을수 있다.

또한 name 없다면 아래와 같이 출력된다 

컴포넌트에 name이 존재하지않는다.

name을 전달하지 않고 기본값을 사용하고 싶을 때가 있고 아래와 같이 기본값을 넣을 수 있다.

import React from 'react';

class Ex1 extends React.Component {
    
    static defaultProps = {
        name : '리액트'
    }
   
    render(){
        return <h1>안녕하세요. { this.props.name }님</h1>;
    }
}

/*
Ex1.defaultProps = {
    name : '리액트'
}
*/

 

위의 static과  아래 Ex1.defaultProps는 차이가없다. 다만 위의 버전은 최신 js의 문법이다.

결과확인

 

요즘 리액트는 훅을 사용 클래스는 더이상 최신 문법이아니다. 리액트도 훅을 권장하고 함수형을 권장한다.

 

props와 state가 변하면 렌더가 다시된다. 프로젝트가 커지면 한번에 렌더링이 많이 되기때문에 개발자가 렌더링을 결정해야하는 시점이온다 그럴때 shouldCompnentUpdate()를 사용해야한다.  (memo는 shouldCompnentUpdate 와 다르다 정확히는 pure컴포넌트(state가 변할때만 렌더링 시켜주는 메소드) 와 같다.)

react memo 는 성능 최적화를 이루기위해서 사용한다.  클래스 형태도 성능 최적화 컴포넌트인 퓨어 컴포넌트인데 좀금더 커스터마이징 할수있는 shouldCompnentUpdate() 가 있다.