오늘 새로 배운 것
map함수로 반복되는 구조의 컴포넌트에 각각 다른 style 적용하기
일반 업데이트 방식과 함수형 업데이트 방식의 차이
여기 일반 업데이트 방식에서는 onClick 안의 setNumber가 각각 실행되서 3씩 증가하는 게 아니고 batch로 처리가 됨.
setNumber로 몇개의 명령을 내리든 리액트에서 명령을 하나로 모아서 최종적으로 한번만 실행하기 때문
반면에 이 함수형 업데이트 방식에서는 순차적으로 각각 한번씩 실행을 시켜 3씩 증가한다.
useEffect
useEffect는 useEffect가 속한 컴포넌트가 렌더링될 때 실행되는 것이 핵심 기능
state가 변경될 때 컴포넌트가 리렌더링되는데 리렌더링 됐기 때문에 useEffect가 다시 실행된다.
의존성 배열로 useEffect를 제어할 수 있다.
의존성 배열을 빈 배열로 두면 컴포넌트가 렌더링 될 때 딱 한번만 useEffect를 실행할 수 있다.
clean up을 활용해서도 useEffect를 제어할 수 있다.
컴포넌트가 화면해서 사라졌을 때 무언가를 실행하고 싶을 때 쓰인다.
컴포넌트가 화면에 mount 또는 unmount 됐을 때 실행된다. mount/unmount는 리액트 라이프사이클의 단계 중 하나.
redux
부모 컴포넌트에서 자식 컴포넌트로 props를 주지만 실제 프로그램에서는 이런 순서로만 실행되지 않는다. 그래서, 전역적(global)으로 상태를 저장할 수 있는 곳(store)을 따로 만들고 어떤 컴포넌트든지 이곳에 쉽게 접근해서 상태 관리할 수 있게 하는 것. Redux를 사용함으로서 props drilling의 불편함을 해소할 수 있다.
redux를 리액트에서 사용하기 위한 패키지 설치
React-redux 패키지는 redux를 React에서 사용할 수 있도록 서로 연결해주는 패키지이기 때문에 redux와 함께 추가해준다.설정 코드에 대해서는 중요하지 않기 때문에 코드를 분석하고 이해할 필요까지는 없다.
reducer
reducer란 dispatch를 통해 전달받은 action 객체를 검사하고 조건이 일치했을 때 새로운 상태값을 만들어내는 변화를 만드는 함수이다.
action
reducer로 명령을 보내기 전에 명령을 만들어야하는데 redux에서는 그 명령을 action이라고 한다. 행동을 코드로 만들면 action 객체인데 반드시 'type'이라는 key를 가져야한다. reducer가 type이라는 키를 확인하기 때문이다. action 객체를 보내기 위해서(dispatch를 사용하기 위해서) store의 내장함수인 useDispatch라는 훅을 사용해야한다.
reducer에게 명령을 내리기 위한 형식으로 'type'이라는 key를 가진 action 객체를 넣어주어야한다. 그리고 이 객체 type의 value는 대문자로 작성한다(예: PLUS_ONE)
// 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};redux 안에 데이터를 저장하는 store가 있고 그리고 그 안에 reducer가 포함되어 있다. 다시 말하면, redux는 reducer를 포함한 store라고 할 수 있다.
어떤 action을 일으키면(dispatch) 그때 reducer가 자동 실행된다. 그 action에 맞게 store에 있는 데이터를 reducer가 수정해준다.
dispatch, store, module
dispatch란 action 객체를 reducer로 보내는 전달자 함수이다.
module의 구성요소는 initialState, reducer가 있다.
store와 module이 정상적으로 잘 연결되었는지 확인하려면 컴포넌트에서 store를 직접 조회하면 된다. 컴포넌트에서 redux의 store을 조회하려면 useSelector라는 훅을 사용한다. useSelector, state는 모든 module의 state를 조회할 수 있는 값이다.
action creator
action 객체가 엄청 많아지만 value를 일일이 하드코딩하는 것은 비효율적이기 때문에 action creator를 사용한다.
action creator를 사용하는 이유
- 휴먼에러를 방지할 수 있다.
- 코드 가독성을 높인다.(action의 리스트업)
payload
payload는 reducer로 보내는 action 객체에 어떤 정보를 같이 담아 보낼 때 사용한다. 반드시 payload라고 명명해서 사용해야하는 것은 아니지만 payload라고 명명하는 것이 컨벤셔널하다.
action creator를 생성할 때 매개변수 자리에서 받을 준비를 하고 반환하는
action객체에 payload라는 key, 받은 매개변수를 value로 하여 구현
(ES6 에서는 key, value 같을 때 value 생략 가능)
reducer에서 payload 사용할 때 action.payload 이런 식으로 사용한다.
Ducks Pattern
redux module을 개발하는 개발자마다 구성 요소를 재각각 구현한다면?
redux module을 개발한 그 개발자와 협업하는 상황이라면 수많은 파일 중 내가 필요로하는 구성요소를 찾는 것이 쉬울까?
이러한 점 때문에 Erik Rasmussen라는 개발자가 고안한 패턴대로 작성하게 되었다고 한다.
< Ducks Pattern >
1. reducer 함수를 export default 한다
2. aciton creator 함수들을 export 한다.
3. action의 type은 app reducer action-type의 형태로 작성한다.
module 파일 1개에 action-type, action creator, reducer가 모두 존재하는 작성 방식
웹 퍼블리싱 중에...
샘플 블록을 만들어놓고 가리고 다른 블록 요소에 영향을 주지 않기 위해
position: absolute
overflow: hidden
속성으로 해놓는다. 그리고 form 태그 밑의 fieldset 그룹에서 테두리를 숨기기 위해, 그리고 이미지 테두리를 숨기기 위해
fieldset, img{
border:0
}
으로 해놓는다.
상위 요소의 position을 absolute든 relative든 지정을 해줘야 하위 요소가 그것을 기준점으로 top, bottom등으로 위치를 지정할 수 있다.
padding, boarder - 박스 사이즈에 포함
margin - 박스 사이즈에 포함x 밖의 크기를 확장해서 사용
display:table-cell
부모태그에
display : table
table-layout: fixed;
을 선언해 주고
자식태그에
display : table-cell
을 선언해주면
갯수가 몇개가 되든 동일한 간격으로 보이게 할 수 있다.
아이콘 가운데 정렬
아이콘을 감싸주고 있는 블록 안에서 position을 absolute로 해놓고 top 50%, left 50% 이런 식으로 한 뒤에 margin값으로 세부적인 조정을 해주면 된다.
float
float:left 왼쪽으로 착착 붙인다
map과 forEach의 차이
forEach 메서드는 단순히 반복문을 대체하기 위한 함수이고, map 메서드는 요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차함수다.
하루를 돌아보며...
아직 리액트에 입문한지 얼마 안되서 그런지 props, state, useState 이후부터 오늘 배운 useEffect, redux의 세부 내용들이 어렵게 느껴진다. 그나마 다행인 것은 예전에 Vue와 Vuex를 찍먹한 적이 있어서 큰 틀에서는 비슷한 부분이 많다고 느껴져서 그런지 어느 정도 이해할 수는 있었다. 아무튼 이제 숙련 강의까지 다 들었으니 내일은 본격적으로 리액트 입문부터 다시 복습하면서 개인과제도 마저 구현해보고 가능하다면 redux부분까지 공부해보려고 한다.
