얼음저장소

3주차 다섯번째 과제는 Redux에 대한 짧은 강의와 함께 Redux 를 이용하여 간단한 메신저 페이지를 만드는 과제가 나왔다. 처음 Redux 를 써야했어서 간단하게 강의를 듣고 오긴 했지만 아직 모르는게 많은 느낌이라 프로젝트에 잘 적용시킬 수 있을지 조금 걱정이였다. 구현해야하는 기능 🖼 레이아웃 대화목록은 상단에, 입력창은 하단에 위치 대화목록 스크롤 기능 입력창 왼쪽에는 입력란, 오른쪽에는 보내기 버튼 메세지 프로필 이미지는 원형으로 왼쪽에 위치 오른쪽 컨텐츠 영역 상단에는 이름, 보낸 날짜, 하단에는 메세지 출력 메세지 오른쪽 하단에 삭제, 답장 버튼 🔥 기능 입력창 엔터키로 전송 가능 / 입력시 전송버튼 활성화 컨텐츠를 입력하지 않으면 전송할 수 없는 기능 입력란은 멀티라인 / 출력도 그대로..

Reducer 란? 액션을 주면 그 액션이 적용되어 달라진 결과를 만들어 줌 (안달라질 수도 있음) 함수이다. Pure Function : 같은 인자를 주었을 때 항상 같은 값이 나와야 함 Immutable⇒ 리듀서를 통해 상태가 달라졌음을 리덕스가 인지하는 방식이기 때문 : 기존의 상태와 업데이트된 상태가 각각 다른 객체여야함 형태 function 리듀서(previousState, action) { return newState; }​ 액션을 받아 스테이트를 리턴하는 구조 인자로 들어오는 previosState 와 리턴의 newState 는 다른 참조를 가지도록 해야한다. 예제 코드 // action.js export const ADD_TODO = "ADD_TODO"; function addTodo(to..

리덕스의 액션이란? 액션은 객체(Object)이다. 두가지의 형태가 있다 // type 1 {type: 'TEST'} // payload 없는 액션 // type 2 {type: 'TEST', params: 'hello'} // payload 있는 액션 필수 프로퍼티는 type 하나이며, type은 보통 문자열(string)이다. 액션은 스토어에 전달이 되면 스토어의 상태를 변경하는데 사용된다. 리덕스의 액션 생성자 (Action Creater) 액션을 생성하는 함수를 액션 생성자라고 한다. 함수를 통해 액션을 생성하여 액션 객체를 리턴해주는 함수이다. createTest(’hello’); // {type: ‘TEST’, params: ‘hello’} 와 같은 구조다. 리덕스의 액션의 역할 액션 생성자를..