[TIL]23.04.04 ClassComponent, FunctionalComponent

ClassComponent, FunctionalComponent

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 조직이 다른 UI로직과 연결된다는 사실을 받아들인다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 Component로 분리한다.
React에서 JSX(JavaScript XML:javaScript를 확장한 문법) 사용이 필수는 아니지만, js코드 안에서 시각적으로 더 도움이 되고, 에러 및 경고 메시지를 표시 할 수 있게 해준다.

Functional Component에서는 return을 이용해 JSX를 반환한다.

import React from "react";
 
const FunctionalComponent = () => {
 return <h1>Hello</h1>;
};

Class Component에서는 render 메서드 내에서 JSX를 반환한다.

import React, { Component } from "react";
class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

Functional Component에서는 Parameter를 이용하여 props 인자를 받아온다.

const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

Class Component : Class형이므로 this를 사용

class ClassComponent extends React.Component {
  render() {
    const name  = this.props.name;
    return <h1>Hello, { name }</h1>;
 }
}

Handling state

state는 Class Component에서만 사용 가능한 기능었다.
하지만 React 16.8 ver 부터 Function Component에서도 state를 사용 할 수 있도록 React Hook useState가 도입되었다.

Hook 이란

Functional Component에서 React state와 생명주기(lifecycle) 기능을 연동, 연결해주는 함수다.
Hook을 통해 기존의 ClassComponent의 문제점을 해결

Hook 장점
:여러 Hook끼리 재조립 가능 -> 재사용 가능한 로직을 쉽게 만듦
로직을 한 군데에 모을 수 있다.
Hook은 단순 함수이기 때문에 정적 타입 언어에서도 타입을 쉽게 작성

State Hook에서는 state관리, Effect Hook에서는 Effect 발생을 위해 사용

useState 사용

useEffect 사용

Portfolio 웹페이지 만들기 코드리뷰

vercel 배포 주소
https://techit-first-react-app.vercel.app/

github 코드
https://github.com/ljhmd00/techit-first-react-app.git
중점사항 : 수업 시간에 배운 props, routes 기능을 활용, json 파일 만들어서 index, value 받아오기

self-review
▪ 부모-자식-손자(?)Component에 projectData.json index, value 값 넘겨주기
▪ map 함수를 통해 component 간소화 및 반복되는 내용 줄이기
▪ routes를 최상위 component가 아닌 PortfolioCard.jsx에 선언해서 주소값 이동 할 경우 주소에 해당하는 Component가 하위 섹션으로 불려옴 -> 주소값이 있는 모달로 변경 (Routes는 최상위 Component에 설정해야한다!)