Redux 소개
2021. 3. 31. 22:08
프로그래밍/React
Redux 리덕스는 가장 사용률이 높은 상태관리 라이브러리 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있음 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있음 추가적으로 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줌 개념 정리 액션(Action) 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킴 이는, 하나의 객체로 표현됨 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있음 액션 생성함수(Action Creator) 액션을 만드는 함..
to do list 만들기_7 (컴포넌트 최적화)
2021. 3. 29. 20:47
프로그래밍/React
컴포넌트 최적화 이 프로젝트는 간단하기에 최적화를 할 필요는 없지만 공부를 위해 🔥🔥 자원 낭비되는 부분을 없애기 위한 컴포넌트 최적화 👉값을 입력할 때 마다 render 함수가 실행됨 👉DOM에 변화가 일어나는 것은 아니지만 가상DOM에 rendering하는 자원이 미세하게 낭비되고 있음 src/components/ToDoItemList.js import React, { Component } from 'react'; import ToDoItem from './ToDoItem'; class TodoItemList extends Component { shouldComponentUpdate(nextProps, nextState) { return this.props.todos !== nextProps.todo..
to do list 만들기_6 (체크 하기/풀기, 아이템 제거하기)
2021. 3. 26. 20:34
프로그래밍/React
체크 하기/풀기 src/App.js import React, { Component } from 'react'; import ToDoListTemplate from './components/ToDoListTemplate'; import Form from './components/Form'; import ToDoItemList from './components/ToDoItemList'; class App extends Component { (...) handleToggle = (id) => { const { todos } = this.state; // 파라미터로 받은 id 를 가지고 몇번째 아이템인지 찾습니다. const index = todos.findIndex(todo => todo.id === id);..
to do list 만들기_5 (초기 state 정의와 Form 기능 구현)
2021. 3. 25. 20:49
프로그래밍/React
초기 state 를 정의 src/App.js import React, { Component } from 'react'; import ToDoListTemplate from './components/ToDoListTemplate'; import Form from './components/Form'; import ToDoItemList from './components/ToDoItemList'; class App extends Component { id = 3 // 이미 0,1,2 가 존재하므로 3으로 설정 state = { input: '', todos: [ { id: 0, text: ' 리액트 소개', checked: false }, { id: 1, text: ' 리액트 소개', checked: true..
to do list 만들기_4 (ToDoItemList, ToDoItem 컴포넌트 만들기)
2021. 3. 23. 20:13
프로그래밍/React
ToDoItemList 컴포넌트 만들기 이 컴포넌트는 이후에 만들 ToDoItem 컴포넌트 여러개를 렌더링해주는 역할을 함 src/components/ToDoItemList.js import React, { Component } from 'react'; class ToDoItemList extends Component { render() { const { todos, onToggle, onRemove } = this.props; return ( ); } } export default ToDoItemList; 이렇게 비어있는 컴포넌트를 생성 이 컴포넌트는 3가지의 props를 받게 됨 1️⃣ todos: todo 객체들이 들어있는 배열 2️⃣ onToggle: 체크박스를 키고 끄는 함수 3️⃣ onRemo..
Redux 규칙
2021. 3. 22. 21:11
프로그래밍/React
Redux 사용하기 리덕스는 리액트에서 사용하려고 만든 상태 관리 라이브러리지만, 리액트에 의존하지 않음 즉, 리액트를 사용하지 않아도 리덕스를 사용할 수 있음 리덕스의 세 가지 규칙 1️⃣ 스토어는 단 한 개 스토어는 언제나 단 한 개임 그 대신 리듀서를 여러 개 만들어서 관리할 수 있음 2️⃣ state는 읽기 전용 리덕스의 상태 state 값은 읽기 전용임 이 값은 절대로 직접 수정하면 안됨 👉 그렇게 하면 리덕스의 구독 함수를 제대로 실행하지 않거나 컴포넌트의 리렌더링이 되지 않을 수 있음 상태를 업데이트 할 때는 언제나 새 상태 객체를 만들어서 넣어 주어야 함 3️⃣ 변화는 순수 함수로 구성 모든 변화는 순수 함수로 구성해야 함 여기서 함수란 바로 리듀서 함수를 가리킴 순수 함수에서 결과 값을 ..
Redux란?
2021. 3. 19. 23:03
프로그래밍/React
Redux란? 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것 리덕스를 사용하면 스토어라는 객체 내부에 상태를 담게 됨 이를 사용하면 다음 구조로 프로젝트를 관리할 수 있음 리덕스를 사용하면 스토어에서 모든 상태관리가 일어남 상태에 어떤 변화를 일으켜야 할 때는 액션이라는 것을 스토어에 전달함 액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킴 액션을 전달하는 과정을 디스패치라고 함 스토어가 액션을 받으면 리듀서가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정함 액션을 처리하면 새 상태를 스토어에 저장함 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달함 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함..
intelliJ SheApplication 오류로 build 실패 시
2021. 3. 18. 23:59
프로그래밍/Spring Boot
intelliJ SheApplication 을 찾을 수 없습니다. 라는 오류가 뜰 시 SheApplication 우클릭 > SheApplication Run 'SheAppication' 클릭으로 간단하게 오류 해결 가능