[React] 내가 이해한 react

1. 태그를 컴포넌트화(부품화)하여 코드 재사용율을 높이고, 코드 수정이 쉽게 한다.

전 직장에서 소프트웨어 개발할 때 모든 ui를 부품화하여 개발했는데 그거랑 비슷한 개념임. 굿!

버튼에 클릭 이벤트를 넣는다던가 별도의 함수를 호출한다? 그럼 해당 컴포넌트에 함수를 작성하면 됨. 굿!

 

 

2. 웹에서 ui를 실시간으로 고치는 작업은 비용이 크다고 한다.

그런데 react를 사용하면 ui를 새로 그리는 비용이 줄어든다고 함.

 

 

3. jsx 

function App() {
  return (
    <div>
      <h3>Hello</h3>
    </div>
  );
}

React에서 위와 같이 html코드를 return하는 스타일을 jsx라고 하고 파일명도 .jsx로 되어있다.

 

 

4. component

import React from "react"
import TodoItem from "./TodoItem" // same folder

function TodoBoard(props){
  // console.log("TodoBoard", props.todoList);
  return(
    <div>
        <h1>Todo List</h1>    
      
      {props.todoList.map((item)=><TodoItem item={item}/>)}
    </div>
  )
}
export default TodoBoard

위는 ToDoBoard라는 컴포넌트 코드이다.

component는 인자로 props를 받을 수 있으며 이것은 json형태임! 콘솔로그로 찍으면 출력됨 ㅇㅇ

여기로 들어온 인자값으로 ui를 업데이트 해준다.

다른 페이지에서 사용하는 컴포넌트이므로 꼭! export해주어야한다.

저 코드는 대충 인자로 들어온 props.todoList값으로 TodoItem을 생성하고 값을 업데이트하라는 뜻임

 

 

5. state

값을 실시간으로 업데이트 할거예염~! 할 때 꼭 사용하는게 state고

state를 사용하려면 App.jsx에 아래와 같이 import해주어야함

import { useState } from 'react'

 

아래는 state를 사용한 코드

import './App.css'
import { useState } from 'react'
import TodoBoard from "./components/TodoBoard.jsx"

export default function App() {
  const [inputValue, setInputValue] = useState('')
  const [todoList, setTodoList] = useState([])
  const addItem =()=>{
    console.log("im hererere!", inputValue);
    setTodoList([...todoList, inputValue]); // 기존 value를 유지한 채 inputValue를 array에 추가한다
    console.log(todoList);
  }
  return (
    <main>
      <input value={inputValue} type="text" onChange={(event) => setInputValue(event.target.value)}></input>
      <button onClick={addItem}>추가</button>
      <TodoBoard todoList={todoList}/>
    </main>
  )
}

useState는 배열로 선언하고, 배열에는 값을 기억할 변수와 값을 변경시킬 함수를 넣는다.

생성자의 파라미터로 넣는 값은 초기값임

state를 사용하는 이유는 ui를 업데이트 할 때는 App()을 호출하는데

만약 변수가 let count = 0;로 선언되어있다면 ui를 업데이트 할 때마다

계속 count의 값이 0이 되어버리기 때문에 변수값을 저장해놓기 위해 state를 사용하는 것이다.

 

콘솔로 출력해보면 state는 한 박자 느리게 값이 출력되는데

ui를 업데이트 할 때 ui를 변경하는 모든 Set함수를 모아서 한번에 처리를 하기 때문에 (비동기적)

바로바로 값이 변경되는 것이 아니다.