TIL ( 5일차 2022-05-23 )

선언 방식

• 함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div>{name}</div>
}

export default App;

• 클래스형 컴포넌트

import React from 'react';

class App extends React.Component {
  render() {
    const name = 'react';
    return <div>{name}</div>
  }
}

export default App;

클래스형 컴포넌트는 class 키워드와 extends 키워드로 React.Component 를 반드시 상속 받아야 한다.

render() 유무

• 함수형 컴포넌트 - render()가 필요 없다.

function App() {
  .. 코드 내용 ..
  return (
    <div className="App">
      test
    </div>
  );

• 클래스형 컴포넌트 - 반드시 render() 함수에서 return을 해주어야 한다.

class LifecycleEx extends React.Component {

...코드 내용...
  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {

    console.log('in render!');

    return (
      <div>
          test
      </div>
    );
  }
}

ref 사용 방식

• 함수형 컴포넌트 - useRef() 함수를 사용한다.

function App() {
  .. 코드 내용 ..
 const text = React.useRef(null);
  );

• 클래스형 컴포넌트 - createRef() 함수를 사용한다.

class LifecycleEx extends React.Component {

...코드 내용...
  testRef = React.createRef();
}

• 함수형 컴포넌트 - render()가 필요 없다.

state 사용 방식

• 함수형 컴포넌트 - useState() 함수를 사용한다.

function App() {
  .. 코드 내용 ..
 const [text, PrintText] = useState("안녕하세요");
 const Print = () => {
		PrintTest("휴 어렵다");
  );

• 클래스형 컴포넌트 - setState() 함수를 사용한다.

class LifecycleEx extends React.Component {

this.state = {
	msg : "안녕하세요",
}
// key : value 형식으로 넘겨준다.
  textPrint = () = this.setState({msg:"아따 힘들다"});
}

아직 정리할 부분이 많이 남았지만, 강의를 토대로 기억나는 부분을 정리해보았다.

부족한 부분은 더 보완할 예정이다.