React_Component란?

React에서 Component는 props를 input으로 하며 사용자인터페이스가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수이다. 컴포넌트는 화면에 그리고 업데이트하고 지우는 것을 render해야하며 이렇게 만들어진 컴포넌트는 동일한 기능이 필요할 때 재사용이 가능하다.

React에서 Component를 정의하는 방법 중 javascript 함수와 ES6 클래스 구문을 사용하는 방법이 있다. 아래에서 자세하게 알아보자.

컴포넌트참고블로그
https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818

functional component(Stateless Component)

함수형 컴포넌트는 props를 인수로 받아 React요소를 리턴하는 방식이다. class와는 다르게 state가 없고 lifeCycle함수를 사용할 수 없다. 그렇다보니 단순하게 데이터를 받아서 랜더링을 하는 경우 이용되고 props에는 접근이 가능하다. 또한 render를 하기 위해서 ReactDOM을 설치해서 이용한다.

 function Grocery(props) {
   return <li>I like {props.name}</li>;
 }

 const GroceryList = () => (
   <ul>
     <Grocery name="cucumbers" />
     <Grocery name="kale" />
   </ul>
 );

ReactDOM.render(
  <GroceryList />,
  document.getElementById("root")
);

기능적으로 javascript의 함수이므로 state나 Lifecycle을 사용할 수 없다. 그래서 React Hooks을 사용해서 useEffect()는 Lifecycle을 대체해서 사용하고 useState는 state를 저장하는데 사용될 수 있다.

import React, { useState, useEffect } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 선언한다.
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트한다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

리액트공식문서"hooks"

class component

클래스 컴포넌트는 React.Component에서 확장하고 React 요소를 리턴하는 render함수를 사용하는 방식이다. state와 lifecycle함수를 사용할 수 있다.

 class TodoListItem extends React.Component {
   constructor(props) {
     super(props);
     // 아래와 같이 state를 만들고 안에 key value를 설정합니다. state는 변하는 값이다.
     this.state = {
       done: false,
     };
   }

   // constructor와 render 사이에 메소드를 다음과 같이 작성할 수 있습니다.
   onListItemClick() {
     // 기존의 state를 this.setState을 통해 바꿀 수 있습니다.
     this.setState({
       done: !this.state.done,
     });
   }
   
   render() {
     // 삼항 연산자로 <li>의 스타일을 state에 상황에 따라 바꿉니다.
     const style = {
       textDecoration: this.state.done ? "line-through" : "none",
     };
     // inline style에 위 style을 넣고,
     // onClick event 메소드는 클릭시 위 onListItemClick() 메소드가 실행될 수 있도록 합니다.
     // this가 바인드 안되어있기 때문에 bind를 해줘야 실행이 됩니다.
     return (
       <li style={style} onClick={this.onListItemClick.bind(this)}>
         {this.props.todo}
       </li>
     );
   }
 }

링크텍스트

링크텍스트