React Component

LOOPY·2021년 8월 23일

1. React Component 만드는 법

(Hooks 이전)컴포넌트 내부에 상태가 있으면 class / 상태 없고 라이프사이클 사용하면 class / 상태 없고 라이프사이클도 관계 없으면 function 이용
(Hooks 이후) function에서도 상태와 라이프사이클 적용 가능

1) Class Component

React.Component 상속과 render함수 내에서 React.Element 형태 return 필수

import React from ‘react’;

// 정의
class ClassComponent extends React.Component{
  render(){ 
    return (<div>Hello</div>);
  }
}

// 사용
ReactDOM.render(<ClassComponent />, document.querySelector(#root));

2) Function Component

import React from ‘react’;

// 정의 1
function FunctionComponent(){
  return <div>Hello</div>;
}
// 정의 2
const FunctionComponent = () => <div>Hello</div>;

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector(#root));

2. React.createElement로 컴포넌트 만들기

React.createElement(type, [props], […children]);
- type: 태그 이름 문자열 or 리액트 컴포넌트 or React.Fragment
- [props]: 리액트 컴포넌트에 넣어줄 데이터 객체
- […children]: 자식으로 넣어주는 요소들

1) 태그 이름 문자열 typee

ReactDOM.render(
  // <h1>태그 이름 문자열 type</h1>
  React.createElement(‘h1’, null, ‘태그 이름 문자열 type’), 
  document.querySelector(‘#root’)
);

2) 리액트 컴포넌트 type

const Component () => {
  // <p>리액트 컴포넌트 type</p>
  return React.createElement(‘p’, null, ‘리액트 컴포넌트 type’); 
};
ReactDOM.render(
  React.createElement(Component, null, null), // <Component /> 
  document.querySelector(‘#root’)
);

3) React.Fragment

ReactDOM.render(
  // 따로 태그 없이 root 내에 바로 children 삽입 -> 배열처럼 연결해 삽입 가능
  React.createElement(React.Fragment, null, ‘React Fragment type’),
  document.querySelector(‘#root’)
);

4) 복잡한 리액트 엘리먼트 모임

createElement 세 번째 인자로 createElement 반복하여 안겨있는 형태(매우 복잡)
-> JSX 등장!

3. JSX

babel 통해 순수한 JavaScript로 컴파일 해 사용
-> <div>hello</div> 작성하면 React.createElement(‘div’, null, ‘hello’);로 babel이 바꿔줌
변환 위해 단순 html보다 엄격한 기준 적용 -> 가독성 좋고 오류 인지 쉬움
JSX 문법
- 최상위 요소는 하나
- 최상위 요소를 리턴하려면 소괄호()로 감싸기
- 자식들을 바로 랜더링하고 싶으면 <>자식들</> 이용 -> Fragment
- 자바스크립트 표현식 사용하려면 $없이 중괄호만 {표현식} 이용
- if문 사용불가 -> 삼항 연산자 혹은 && 사용
- style 이용해 인라인 스타일링 가능
- class 대신 className 키워드 사용해 class 적용
- <태그 이름 props=”값”> 형태로 작성하고 닫는 부분 꼭 필요

4. Props와 State

props: component 외부에서 component에게 주는 데이터
state: component 내부에서 변경할 수 있는 데이터
render함수: props와 state를 바탕으로 component를 그림
-> props나 state가 변경되면 render가 다시 발생할 수 있음!

1) Function Component에서

속성으로 넘겨준 후 props.이름으로 처리하기

function Component(props){ // {message: ‘안녕’}
  return (<div><h1>{props.message}</h1></div>);
}

ReactDOM.render(<Component message=’안녕’ />, document.querySelector(‘#root’));

2) Class Component에서

state는 꼭 객체형태로 초기화
생성자 내에서 this.state로 초기화도 가능
밖에서 Component.defaultProps = { key: value };로 기본값 지정
-> 앞에 static 붙이면 class 안에서만 사용 가능 (function 안돼요!)

class Component extends React.Component{
  state = { count: 0, }; 
  // constructor(props) {
  //   super(props);
  //    this.state = {count: 0, }; 
  // }

  render(){
    return (<div><h1>{this.props.message}</h1></div>);
  }
  // static Component.defaultProps = { message: ‘기본값1’ }; 
}
// Component.defaultProps = { message: ‘기본값2’ };

🌟 class에서 state 변경하고 render함수에 바로 반영시키려면 값에 직접 접근하지 않고 this.setState() 함수 사용!

// 매개변수로 새로운 객체 할당
this.setState({ count: this.state.count+1, });
// or 함수를 매개변수로 prev 전달받아 새로운 값 return
this.setState((prev) => {
  const new = { count: prev.count+1 }
  return new;
});

5. Event Handling

camelCase로 앞에 on 붙여 사용 (onClick, onMouseEnter 등)
이벤트에 연결된 js 코드는 함수 이벤트={함수}
실제 DOM 요소들에만 사용 가능 -> react component에 사용하면 그냥 props로 전달됨

1) function component에서

function Component(){
  return <button onClick={() => {console.log(‘clicked’);}}>
    클릭
    </button>
  }
}

ReactDOM.render(<Component />, document.querySelector(‘#root’));

2) class component에서

class Component extends React.Component{
  state = { count: 0 };
  render(){
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={click}>
          클릭
        </button>
      </div>
    );
  }
  
// 화살표 함수 안쓰려면 constructor에서 binding 필요 
// this.click = this.click.bind(this);
  click = () => { 
    this.setState((state) => ({…state, count: state.count+1}));
  }
}