React-기초[2]

클래스형 component vs 함수형 컴포넌트

클래스형 컴포넌트

• 특징
  1.class를 반드시 선언해주어야 한다.
  2.render() 메소드를 반드시 선언해주어야함.
  3.Component로 상속을 받아야함.

함수형 컴포넌트

• 특징
  1.클래스형에 비해 간단함.

클래스형보다 함수형을 사용하는 이유?

• 리랜더링할때 값을 유지
• props를 불러올 필요없이 호출가능
• 코드의 간결성

JSX문법

JSX문법이란, Javascript를 확장한 문법으로 가독성이 높고 작성하기 쉽다. jsx는 프로젝트에서 컴포넌트를 랜더링할때 반환하는 모습이 html인데 그 코드를 jsx라고 부름.

return ( 
<>
	<h1>리액트 안녕!</h1> 
	<h2>잘 작동하니?</h2> 
<>
.

jsx문법은 여러개의 요소가 있어도 하나의 제일 큰요소로 감싸주어야 한다.

import React from "react";

function Son(props) {
  return <div>{props.granfaName} 아들임</div>;
}

//부모 -> 자식컴포넌트로 전달
function Mother(props) {
  const granfaName = props.granfa;
  return <Son granfaName={granfaName} />;
}

function Grandfather() {
  const name = "놀부일까요";
  return <Mother granfa={name} />;
}

const App = () => {
  return <Grandfather />;
};

export default App;

해당 코드는 props로 전달한 데이터를 부모의 부모까지 보내는 코드입니다.

문제점: 지속된 부모로 올라가면 props 드릴링이 발생하게된다(어디서 오류가 났는지? 유지보수에 어려움이 있음)