[React] React 기초 (1)

react 기초 

 

 

1. component로 코드 재활용

App.js

function App() {
  return(
  	<div>
      <div ClassName = 'box'>
        box1
        <p> aa </p>
      </div>
    </div>
  )
}

이렇게 box 를 여러개 만들어주고 싶을 땐 

Box.js 라는 컴포넌트를 생성한다. 

Box.js

import React from 'react'

const Box = () => {
  return (
    <div>
    
    </div>
  )
}

export default Box

Box를 export해주고 

App.js

import Box from "./Box.js";

function App() {
  return (
    <div>
      <Box/>
      <Box/> //간단한 코드로 여러 개를 가져올 수 있다.
    </div>
  )
}

App.js에서 Box 컴포넌트를 받아올 수 있다. 

 

2. props를 이용해서 다른 내용의 Box 생성

App.js

function App() {
  return (
    <div>
      <Box name = "aa" num = {1}/>
      <Box name = "bb" num = {2}/>
      <Box name = "cc" num = {3}/>
    </div>
  )
}



Box.js

const Box = (props) => {
  return(
    <div>
      Box{props.num}
      <p> {props.name}</p>
    </div>
  )
};

 

3. State 상태 업데이트 

EX 버튼 클릭 시 counter가 증가
//State 는 비동기적으로 작동

import React, {useState} from 'react';

function App() {
  const [count, useCount ] = useState(0); 
  const increase = () => {
    setCount(count +1);
  }
  return (
    <div>
      <div>{count}</div>
      <button onClick = {increase}> click!</button>
    </div>
  );
}

 

 

4. 클래스 컴포넌트 

- function 컴포넌트  -> 보통 이걸로 만듦 (rafce)

- class 컴포넌트  (rcc)

 

*lifecycle 

리액트는 컴포넌트 기반으로 동작하며 컴포넌트의 수명주기가 있다. = lifecycle

렌더링되기 전 준비과정 ~ 페이지에서 제거 

컴포넌트 생성 - 변화(갱신) - 제거 과정 

생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통해 메모리를 반환한다.

메모리를 비우기 위해 라이프 사이클이 존재함

(1) Mounting : 생성될 때

- constructor(생성자) : state 

- render(로딩) : ui 그리기

- componentDidMount(로딩이 끝난 후) : API 호출

 

(2) Updating : 업데이트

- render : setState , New props, forceUpdate 등 업데이트 되는 상황

- componentDidUpdate : State가 업데이트가 되었는지 알려주는 함수

 

(3) Unmounting : 제거할 때 

- componentWillUnmount : 함수 제거할 때 

 

----  function 컴포넌트에서 사용할 수 있는 lifecycle

- useEffect()  --> componentDidMount 역할을 함 (API 호출에 쓰일 수 있다)

                      --> cmponentDidUpdate 역할을 함 (업데이트 확인용)

 

두 번 실행되진 않고 한 번만 실행됨 / 분리가능