221209 TIL

Redux 특강

Redux : 상태를 관리하기 위한 도구(라이브러리)

 

리액트 개발하는 방법

1. index.html

2. id가 root인 div를 index.js에서 코드로 가져옴

3. App.jsx가 작업공간!

 

리덕스가 필요한 이유 : 상태(state) 관리가 필요하기 때문!

store 안에는 state와 reducer가 있다

 

state -> 컴포넌트 단위!!

 

state ->전역(global

1. 전역 state : Redux store에 있는 것들

2. 컴포넌트 state : props로 전달되는 것들

 

Reduer는 state와 action을 받는다

 

 

후발대 강의 - todolist 

리액트는 사용자가 만들어놓은 .jsx 코드를 렌더링 함

state와 props의 변화에 따라 동적으로 렌더링!

 

useState가 return하는 값이 [state, setState]

setState는 항상 이전 값을 인자로 가진다! 

배열을 변경하는 경우 :  setState([prev 이전값) => {return [...prev, 내가 넣고싶은 값]}

const [todos, setTodos] = useState(initialTodos);

// setTodos를 이용해 하위 컴포넌트에서 todos를 변경할 수 있다
// setTodos(변경할 값) --> todos값이 바뀜

import React from "react";

export default function Header({ children }) {
    // 열고 닫는 태그 사이의 내용이 기본적으로 children값이 됨
    // 그래서 props로 넣을 수 있음
    return (
        <header className='head'>
            <h1>{children}</h1>
        </header>
    );
}

 

<input
 	type='text'
	name='title'
	value={title}
 	className='input-title'
	onChange={(e) => {setTitle(e.target.value)}}
/>

// input 태그에서 중요한 건 onChange와 value!!!

form 태그 안의 버튼이 클릭이 되면 onSubmit이 실행됨

 

12/11 todolist 프로젝트 처음부터 만드는 보충 강의

import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import "./App.css";

function App() {
    //state 만들기
    const [todos, setTodos] = useState(initialState);

    // title과 contents
    const [title, setTitle] = useState("");
    const [contents, setContents] = useState("");

    const handleSubmitClick = (event) => {
        // 원래 onSubmit이 가지고 있는 고유기능 삭제 --> 새로고침 방지
        event.preventDefault();

        // title과, contents를 가져와서
        // todos에 넣어주는 과정이 필요(setTodos)
        // 1. 새로운 객체를 만들어요 : Todo 객체
        //   {
        //     title: "제목1",
        //     contents: "내용1",
        //     isDone: false,
        //     id: uuidv4(),
        // }

        const newTodo = {
            title: title,
            contents: contents,
            isDone: false,
            id: uuidv4(),
        };

        // newTodo를 todos에 넣어주기
        setTodos((prev) => {
            return [...prev, newTodo];
        });
        setTitle("");
        setContents("");
    };

    return (
        <>
            <header>헤더입니다.</header>
            <main>
                <section
                    style={{
                        border: "1px solid black",
                        padding: "20px",
                    }}
                >
                    {/* input들이 들어갈 곳
                        1. 인풋필드 2개 만들기
                        2. 버튼 만들기 -> 누르면 input에 있는 값이
                        밑에있는 todolist로 들어가야함 
                   */}
                    <form onSubmit={handleSubmitClick}>
                        제목 : 
                        <input
                            placeholder='제목을 입력해주세요.'
                            value={title}
                            onChange={(event) => {
                                setTitle(event.target.value);
                            }}
                        />
                        내용 :
                        <input
                            placeholder='내용을 입력해주세요.'
                            value={contents}
                            onChange={(event) => {
                                setContents(event.target.value);
                            }}
                        />
                        <button>추가</button>
                    </form>
                </section>
                <p>TodoList 해야할 것</p>
                <section
                    style={{
                        display: "flex",
                    }}
                >
                    {/* todoList 해야할 것 */}
                    {todos
                        .filter((item) => item.isDone === false) // false인 애들만 가져오기
                        .map((item) => {
                            return (
                                <div
                                    style={{
                                        backgroundColor: "#ffebee",
                                        margin: "10px",
                                    }}
                                    key={item.id}
                                    // map이 todos의 있는 내용을 빙글빙글 돌면서 return.
                                    // div가 많기 때문에 div 컴포넌트에 key를 넣어줘야함
                                >
                                    <h4>{item.title}</h4>
                                    <p>{item.contents}</p>
                                    <button>완료</button>
                                    <button>삭제</button>
                                </div>
                            );
                        })}
                </section>
                <p>TodoList 완료된 것</p>
                <section
                    style={{
                        display: "flex",
                    }}
                >
                    {/* TodoList가 들어갈 곳(완료된 것) */}
                    {todos
                        .filter((item) => item.isDone === true)
                        .map((item) => {
                            return (
                                <div
                                    style={{
                                        backgroundColor: "#ffebee",
                                        margin: "10px",
                                    }}
                                    key={item.id}
                                >
                                    <h4>{item.title}</h4>
                                    <p>{item.contents}</p>
                                    <button>완료</button>
                                    <button>삭제</button>
                                </div>
                            );
                        })}
                </section>
            </main>
            <footer>Footer 영역입니다.</footer>
        </>
    );
}

const initialState = [
    {
        title: "제목1",
        contents: "내용1",
        isDone: false,
        id: uuidv4(),
    },
    {
        title: "제목2",
        contents: "내용2",
        isDone: true,
        id: uuidv4(),
    },
    {
        title: "제목3",
        contents: "내용3",
        isDone: false,
        id: uuidv4(),
    },
];

// id를 순차적으로 하게 되면, 지우고 더하는 과정 중에 꼬일 수 있음
// 그래서 id는 아주 유니크하게 만들자

export default App;