Yarn css, 함수형, 클래스형 component 예제, 생명주기 함수 render() 사용하기

주니어 기초 코딩공부/React 기초

Yarn css, 함수형, 클래스형 component 예제, 생명주기 함수 render() 사용하기

jju_developer 2023. 4. 5. 18:20

728x90

안녕하세요 jju_developer입니다.

이어서 리엑트 수업에서 배운 내용을 정리하여 공유드립니다.

cd 001로 이동

다운로드 후,

yarn start를 칩니다.

* yarn start
- 우리가 작성한 코드를 직접 확인해 볼 수 있게 실행하는 명령입니다.

코드로 보겠습니다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

----------------------------------------------------

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

//render 란?

그림을 그리는 것처럼 화면을 그리는 것을 말합니다!!!!

내용을 변경해보겠습니다!

import React from 'react';


function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>쮸블 화이팅...!</p>
    </div>
  );
}

export default App;

app()에 정의 한 내용을 바꾸고 저장만 하면 웹에서 자동으로 변경한 내용이 바로 변경이 됩니다.

한 페이지 내에서 바로 결과 확인 가능 이렇게도 볼 수 있습니다.

002 CSS 적용하기

다시 이번에는

002 폴더로 가서 yarn install을 하고 start를 해봅시다.

Css를 적용하는 방법은 크게 세 가지 방법이 있습니다.

1. css 코드를 html 코드 내부에 삽입하는 방법,

2. html 코드가 있는 파일에 함께 정리하는 방법,

3. css 코드만 따로 파일로 작성하는 방법으로 나눌 수 있습니다.

div {

background-color: rgb(162, 127, 243);

color: rgb(255, 255, 255);

padding: 40px;

font-family: 고딕;

text-align: center;

}

h1 {

color: white;

background-color: #2EFE2E;

padding: 10px;

font-family: 궁서;

}

이렇게 css를 적용을 하면

import React from 'react';

import './App.css';

function App() {

return (

<div>

<h1>쮸블로그 Start React 200!</h1>

</div>

);

}

export default App;

App을 정의하는 곳에서 App.css를 import 해줍니다.

003 Component 사용하기

component란?

특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말합니다.

component를 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용할 수 있습니다.

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다.

쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고,

레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다.

컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC의 뷰를 독립적으로 구성하여 재사용할 수 있습니다.

리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다.

• 컴포넌트 구성 요소

1) property(props)
- 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다.

프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다.

2) state
- 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다.

3) context
- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다.

위에서 한 프로그램을 스탑 시키고

003으로 이동해 보겠습니다.

1. R001_ImportConponent.js 파일 ==> 클래스 컴포넌트

import React, { Component } from 'react

class R001_ImportConponent extends Component {

render () {

return (

<h2>[ THIS IS IMPORTED COMPONENT ]</h2>

)

}

export default R001_ImportConponent;

• 클래스 컴포넌트란?

클래스 컴포넌트는 자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환합니다.

2. App.js 파일 ==> 함수형 컴포넌트

import React from 'react';

import './App.css';

import ImportConponent from './R001_ImportConponent

function App() {

return (

<div>

<h1>003장 쮸 Start React 200!</h1>

</div>

);

}

export default App;

• 함수 컴포넌트란?

함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트입니다.

자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

004 생명주기 함수 render() 사용하기

004 예제를 yarn install을 해주고 yarm start 했습니다.

여기서 잠깐!

Render란?

리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다.

즉, 화면에 그려주는 함수를 말합니다.

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

function App() {
  return (
    <div>
      <h1>쮸 생명주기 Start React 200!</h1>
      <p>CSS 적용하기</p>
      <LifecycleEx></LifecycleEx>
    </div>
  );
}

export default App;

004의 app 예제를 보면

function App() 함수형 컴포넌트를 사용하였습니다.

import React, { Component } from 'react';

class R004_LifecycleEx extends Component {
  render() {
    console.log('3. render Call');
    return (
      <h2>[ THIS IS RENDER FUCNTION ]</h2>
    )
  }
}

export default R004_LifecycleEx;

==> 클래스형 컴포넌트

여기서 정의한 h2가 호출한 App.js로 가서 그려주는 것 입니다.

함수형 컴포넌트에는 렌더링이 없고 리턴문만 있습니다, 함수는 그냥 <LifecycleEx></LifecycleEx>

이렇게 호출을 하여, render함수를 불러옵니다.

★중요!★

렌더링이 일어나는 동안, 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑어보면서, 업데이트가 필요하다고 플래그가 지정되어 있는 모든 컴포넌트를 찾습니다.

만약 플래그가 지정되어 있는 컴포넌트를 만난다면, 클래스 컴포넌트의 경우 classComponentInstance.render()를, 함수형 컴포넌트의 경우 FunctionComponent()를 호출하고,
렌더링 된 결과를 저장합니다.

브라우저를 re-road 하지 않고 바로 화면에 보여줍니다.

컴포넌트의 렌더링 결과물은 일반적으로 JSX 문법으로 구성되어 있으며,

이는 js가 컴파일되고 배포 준비가 되는 순간에 React.createElement()를 호출하여 변환됩니다.

createElement는 UI 구조를 설명하는 일반적인 JS 객체인 React Element를 리턴합니다.

생명주기 함수는 8종의 함수가 있습니다.

생명주기 함수는 리액트 엔진에서 자동으로 호출됩니다.

• 생성 과정: constructor(), getDerivedStateFromProp, render, componentDidMount

• 갱신 과정:

getDerivedStateFromProp,

shouldComponentUpdate,

render,

getSnapshotBeforeUpdate,

componentDidUpdate

• 소멸 과정: componentWillUnmount

005 생명주기 함수 constructor(props) 사용하기

constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며, 처음 한 번만 호출됩니다.

component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화할 때 사용합니다.

super() 함수는 가장 위에 호출해야 한다.

import React, { Component } from 'react';

class R005_LifecycleEx extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    console.log('1. constructor Call');
  }

  render() {
    console.log('3. render Call');
    return (
      <h2>[ THIS IS CONSTRUCTOR FUCNTION ]</h2>
    )
  }
}

export default R005_LifecycleEx;

=> 클래스형 컴포넌트

constructor에 부모에서 전달되어 오는 변수 => props를 초기화하는 경우로 사용하기도 하고,

자신이 사용하는 변수를 state라고 합니다.

이 예제에서는

this.state = {};

이렇게 자신이 사용하는 변수를 비워두었습니다.

먼저 constructor가 실행이 되고 -> getDerived.. 가 없으니까(생략) 그다음 render가 실행됩니다.

화면이 돌아가는 4가지 중에 2가지는 생략되었기 때문에 constructor와 render의 로고가 찍혔습니다.

006 생명주기 함수 getDerivedStateFromProps(props, state) 사용하기

방금 생략된 getDerivedStateFromProps를 알아보겠습니다.

getDerivedStateFromProps(props, state) 함수는 constructor() 함수 다음으로 실행된다고 했죠?

컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해 줍니다.

import React, { Component } from 'react';

class R006_LifecycleEx extends Component {
  static getDerivedStateFromProps(props, state) {
    console.log('2. getDerivedStateFromProps Call :'+props.prop_value);
    return {};
  }
  constructor(props) {
    super(props);
    this.state = {};
    console.log('1. constructor Call');
  }

  render() {
    console.log('3. render Call');
    return (
      <h2>[ THIS IS CONSTRUCTOR FUCNTION ]</h2>
    )
  }
}

export default R006_LifecycleEx;

console.log('2. getDerivedStateFromProps Call :'+props.prop_value);.

부모에서 온 벨류가 찍힐것 입니다.

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

function App() {
  return (
    <div>
      <h1>getDerivedStateFromProps 쮸우 Start React 200!</h1>
      <p>CSS 적용하기</p>
      <LifecycleEx
        prop_value = 'FromApp.js'
      />
    </div>
  );
}

export default App;

R006_LifecycleEx 컴포넌트로 prop_value라는 변수를 전달합니다.

콘솔에 찍힌 내용을 볼까요?

보면 첫 번째로 constructor가 찍히고 그다음 getDericedStateFromPorps 찍히고 그다음 render가 찍혔습니다.

그럼 여기까지 React.js 기초 다지기에 대해 알아보았습니다.

감사합니다.

참고 자료: 초보자를 위한 리엑트 200제

728x90

'주니어 기초 코딩공부 > React 기초' 카테고리의 다른 글

02장 초급 리액트 props, boolean, 객체형 변수로 사용하기! (0)	2023.04.06
React 리액트 생명주기는 무엇일까? (0)	2023.04.06
템플릿 문자열 사용하기, var, let, const 사용하기 (0)	2023.04.05
생명주기 함수 componentDidMount, shouldComponentUpdate() 알아보기 (0)	2023.04.05
01장 노드JS 개념 이해하기 + 다운로드 (npm과 yarn이란?) (1)	2023.04.05

현재글Yarn css, 함수형, 클래스형 component 예제, 생명주기 함수 render() 사용하기

developer_jju's_day

Back-End 백엔드 (재직중) - 웹개발, 서버개발, 데이터베이스 설계 - 영어

level0, 자바 문제풀이, oracle, 문제풀이, 파이썬 기초, Programmers, 프로그래머스 0단계, REACT, 프로그래머스, sql 기초, 0단계, 자바 프로그래머스, java 문자열, Database, SQL, 리액트 기초, java, Java 기초, 프로그래머스 자바, level00,

Today :
Yesterday :

developer_jju's_day