[리액트] 일정관리 만들기 - MAP, 컴포넌트, props, event

https://www.youtube.com/watch?v=qcphnSqneE0&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=1

리액트 한번에 이해

https://www.youtube.com/watch?v=TjUju3aUIDM&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=6

일정관리 만들기

위 강의를 참조해서 필기했습니다.

 

일정관리 페이지 만들기

아래와 같이 App.js + TodoBoard.js + TodoItem.js  3개의 컴포넌트를 각각 다른 파일에 만들었습니다.

(css는 추가하지 않았습니다)

🎈🎈App.js
import './App.css'
import React, {useState} from 'react';
import TodoBoard from "./components/TodoBoard"


function App(){
  const [inputValue,setInputValue] = useState('') //초기값이 비어있음
  const [todoList,setTodoList]=useState([]) //useState의 타입은 array
  
   const addItem =() =>{ //버튼 클릭시 아이템 추가되는 함수
     console.log("im herereree!",inputValue)
     setTodoList([...todoList,inputValue]) 
     // 기존 todoList는 유지하되 새로운 inputValue를 넣어라.
     // = 기존의 todoLisst배열에 새로운 요소 추가한 새로운 배열 생성
     //새로운 배열은 setTodoList을 통해 todoList  변수에 할당됨. -> 최종적으로 todoList에 담김!
   }
  
  return (
    <main>
    {/*  input안에 원래 초기값 있었고, 바뀔 때마다 그 값을 value로 바꿔라!(넣어라) */}
      <input value ={inputValue}type="text" onChange={(event)=>setInputValue(event.target.value)}/>
        <button onClick={addItem}>추가</button>
        <TodoBoard todoList={todoList}/>
{/*       TodoBoard 컴포넌트를 불러와서 todoList라는 props를 전달하기 
        이때,todoList는 사용자가 추가한 모든 할 일 목록 포함하고 있는 배열 */}
    </main>
  );
}
export default App;

🎈🎈TodoBoard.js   : 큰 사각틀 (TodoItem을 들고있음)
import React from "react"
import TodoItem from "./TodoItem"


//App.js에서 <TodoBoard todoList={todoList}/> 로 보낸걸 props로 받기
function TodoBoard(props){
  console.log("todoBoard",props.todoList)
  return (
    <div>
      <h1>Todo List</h1>
      {props.todoList.map((item)=><TodoItem item={item}/>)}
{/*    투두아이템을 보여주고 싶은데 투두아이템의 item을 props로 전달할거다
item으로 전달하면 전달받은 곳에서 props.item 이라고 적으면 사용가능!*/}
    </div>
  )
}
export default TodoBoard

// {props.todoList.map(function(item) {
//     return <TodoItem item={item} />;
// })}


🎈🎈TodoItem.js  : 큰 사각틀 안의 내용들 (TodoBoard 안에 들어가야함)
import React from "react"

function TodoItem(props){

  return (
    <div className="todo-item">
      {props.item}
    </div>
  )
}
export default TodoItem

전체 코드 해석

위 코드는 간단한 TodoList 앱을 만드는 React 애플리케이션입니다. 각각의 파일은 다음과 같은 역할을 합니다.

• App.js: 애플리케이션의 메인 컴포넌트로, 입력창과 추가 버튼을 렌더링하고 TodoBoard 컴포넌트에 할일 목록을 전달합니다.
• TodoBoard.js: 할일 목록을 렌더링하는 컴포넌트입니다. props.todoList를 전달받아 map() 함수를 이용해 각각의 할일 아이템(TodoItem)을 렌더링합니다.
• TodoItem.js: 각각의 할일 아이템을 렌더링하는 컴포넌트입니다. props.item을 전달받아 해당 할일을 렌더링합니다.

앱을 실행하면, 입력창에 할일을 입력하고 추가 버튼을 클릭하면, addItem() 함수가 호출되어 todoList에 새로운 할일이 추가되고, TodoBoard 컴포넌트가 렌더링됩니다. TodoBoard는 todoList를 전달받아 각각의 할일 아이템(TodoItem)을 렌더링합니다. TodoItem 컴포넌트는 각각의 할일을 렌더링합니다.

 

App.js 코드해석

위 코드는 React를 사용한 Todo List 애플리케이션의 메인 컴포넌트인 App입니다.

useState hook을 사용하여, inputValue와 todoList라는 두 개의 state 변수를 선언합니다.

inputValue는 입력 필드의 값으로, todoList는 현재 추가된 todo 아이템들의 리스트입니다.

const addItem은 버튼을 클릭할 때 실행되는 함수입니다. console.log 구문은 디버깅을 위해 사용되며, 

setTodoList 함수는 ...을 써서 이전 todoList 배열 상태를 복제한 후에 inputValue 값을 배열에 추가한 새로운 배열을 todoList 상태로 설정합니다.

이렇게 하면 새로운 할 일 항목이 기존 항목과 함께 유지되며, 이를 통해 TodoBoard 컴포넌트에서 모든 항목을 매핑하여 렌더링할 수 있습니다.

즉, 새로운 값을 추가하여 기존 값을 변경하지 않고, 새로운 배열을 생성하여 상태를 업데이트합니다.

 

마지막으로, App 함수는 JSX를 반환합니다. return 구문 안에는 input 태그와 button 태그, 그리고 TodoBoard 컴포넌트가 있습니다. input 태그는 사용자가 todo 항목을 입력할 수 있는 입력 필드이며, button 태그는 입력한 todo 항목을 추가하는 버튼입니다. TodoBoard 컴포넌트는 현재 추가된 todo 항목들의 리스트를 보여주는 컴포넌트입니다.

이 코드는 Todo List 애플리케이션의 메인 기능인 todo 항목 추가 기능을 구현하고 있습니다.

 

TodoBoard.js 코드해석

TodoList를 보여주기 위한 컴포넌트인 TodoBoard를 정의하고, props를 매개변수로 받아와서

props.todoList를 통해 App.js에서 전달받은 할 일 목록 데이터를 가져옵니다.

그리고 map 함수를 사용하여 props.todoList 배열의 모든 요소들을 TodoItem 컴포넌트로 매핑하여 화면에 출력합니다. TodoItem 컴포넌트는 props.item 값을 받아와서 화면에 출력하는 기능을 담당합니다. 이 컴포넌트를 여러 개 생성하여 TodoBoard에서 출력되도록 구성합니다. 마지막으로 TodoBoard 컴포넌트를 export하여 외부에서 사용할 수 있도록 합니다.

map코드에 대한 설명은 아래에서 하겠습니다. 

 

🎈(중요)MAP & 컴포넌트 &props 개념이 섞인 코드

"map은 array의 아이템을 하나하나 가져와서 아이템으로 반환해줍니다."

map()은 배열의 각 원소를 순회하면서 해당 원소에 대해 지정된 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.

반환된 배열은 원래 배열과 동일한 길이를 가지며, 각 원소는 지정된 함수가 반환한 값을 가집니다.

    {props.todoList.map((item)=><TodoItem item={item}/>)}

1. map 관점: map() 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수의 반환값으로 새로운 배열을 만듭니다. 따라서 props.todoList 배열의 각 요소들을 TodoItem 컴포넌트에 전달해 새로운 배열을 만듭니다.

2. component 관점: TodoItem 컴포넌트는 각각의 할 일을 나타내는 컴포넌트입니다. 따라서, props.todoList 배열에 있는 각각의 할 일에 대해, TodoItem 컴포넌트를 호출합니다.

3. props 관점: TodoBoard 컴포넌트에서 props.todoList를 통해 App 컴포넌트의 todoList 값을 전달 받습니다.

props.todoList는 배열 형태이며, 이 배열에 포함된 요소들 각각을 TodoItem 컴포넌트로 전달할 때

props.item으로 전달합니다. TodoItem 컴포넌트에서 props.item을 사용하여 각각의 할 일 항목을 표시합니다.

이때, TodoItem은 TodoItem 컴포넌트로 보낸다는 말이고, item은 TodoItem에서 사용되는 변수 이름입니다.

{item}은 해당 객체의 실제 프로퍼티 값입니다.

 

이벤트

  return (
    <main>
    {/*  event 안에 InputValue가 들어있다(초기값) */}
      <input value ={inputValue}type="text" onChange={(event)=>setInputValue(event.target.value)}/>
        <button onClick={addItem}>추가</button>
        <TodoBoard/>
    </main>

코드해설

위 코드는 React 컴포넌트의 render 메소드에서 반환되는 JSX 코드입니다.

1. <main> 요소: 이 코드는 HTML5의 main 태그로, 페이지의 주요 컨텐츠를 포함하는 영역을 정의합니다.
2. <input> 요소: 이 코드는 HTML5의 input 태그로, 사용자가 입력한 텍스트를 처리하는 역할을 합니다.                    value 속성은 초기값으로 inputValue 변수를 사용하고, onChange 이벤트를 통해 입력값이 바뀌면                    setInputValue 함수를 호출하여 inputValue 상태 변수에 값을 업데이트합니다.
3. <button> 요소: 이 코드는 HTML5의 button 태그로, 사용자가 클릭하면 addItem 함수를 호출하는 역할을 합니다.
4. <TodoBoard/> 컴포넌트: 이 코드는 TodoBoard 컴포넌트를 호출하는 JSX 코드로, TodoBoard 컴포넌트가 반환하는 요소들을 렌더링합니다.

즉, 위 코드는 사용자가 입력한 값을 TodoList에 추가하는 기능을 가진 간단한 TodoList 애플리케이션입니다. 사용자가 input 요소에 값을 입력하면 onChange 이벤트가 발생하여 setInputValue 함수를 호출하고, 이를 통해 입력값이 inputValue 상태 변수에 저장됩니다. 사용자가 추가 버튼을 클릭하면 addItem 함수가 호출되어 inputValue 값을 todoList 배열에 추가하고, 이를 통해 TodoBoard 컴포넌트에서 todoList 배열을 출력합니다.

 

event.target.value 

일반적으로 input 요소에서 발생하는 이벤트에서, 이벤트 핸들러 함수에 전달되는 event 객체의 속성 중 하나입니다.

여기서 event는 이벤트가 발생한 객체(예: 버튼, 폼, input 요소 등)를 나타내며, target은 이벤트가 발생한 요소를 가리킵니다. 따라서, event.target은 이벤트가 발생한 input 요소를 나타냅니다.

value는 input 요소에 입력된 값을 나타내며, 이벤트가 발생한 input 요소의 value 값은

event.target.value로 접근할 수 있습니다.

즉, onChange 이벤트 핸들러 함수에서 event.target.value를 사용하면, input 요소에 입력된 값을 추출하여 다른 처리에 사용할 수 있습니다. 예를 들어, 위 코드에서는 setInputValue 함수를 사용하여 input 요소에 입력된 값을 inputValue 상태 변수에 저장하고 있습니다.

 

렌더링

렌더링(rendering)이란, 컴퓨터에서 처리된 데이터나 그래픽 등을 화면에 나타내는 기술을 말합니다. React에서는 Virtual DOM과 DOM 업데이트 과정을 통해 화면에 UI를 렌더링합니다. Virtual DOM은 메모리상에 존재하는 가상의 DOM 구조체로서, 이를 이용하여 변화된 부분만 실제 DOM에 업데이트하여 불필요한 리렌더링을 최소화하고 빠른 렌더링을 구현합니다. 이 과정에서 React는 Virtual DOM을 조작하여 화면에 필요한 부분만 업데이트하므로, 전체적인 성능 향상에 기여하게 됩니다.