[ 스파르타 / TIL ] 내일배움캠프 #35

오늘 한 것

---

• 알고리즘 문제 풀기
• 리액트 강의 보기
• Todo list 리덕스로 만들기

 

 

오늘의 배움

---

react-router-dom의 Link를 styled-components로 꾸미기

---

아래의 코드처럼  styled(Link)`` 를 해주면 Link의 모든 속성을  inherit 하면서 새로운 속성을 더해줄 수 있다.

 

style.js 

import styled from "styled-components";
import { Link } from "react-router-dom";

export const DetailsButton = styled(Link)`
  text-decoration: none;
  color: blue;
  font-size: 14px;
  &:hover {
    color: black;
  }
`;

 

TodoItem.jsx

<DetailsButton to={`/${id}`}>상세보기</DetailsButton>

 

 

useSelector

---

• 리덕스의 state를 조회할 수 있다.

import { useSelector } from 'react-redux'
const user = useSelector(state => state.todos);

 

useDispatch

---

• 생성한 action을 useDispatch를 통해 발생시킨다.
• 만들어둔 액션생성 함수를 import 한다.

import { useDispatch } from 'react-redux';

const TodoItem = ({ id, inputTitle, input, isDone }) => {
	const dispatch = useDispatch();
	
    // 완료 버튼이 onClick되면 실행되는 부분
	const toggleDoneHandler = (id) => {
		dispatch(toggleDone({ id }));
  	};
    ...
}

// 위에서 dispatch한 toggleDone는 아래와 같이 정의된 액션 생성 함수이다.
// 투두 완료 여부
export const toggleDone = (payload) => {
  return {type: TOGGLE_DONE, payload};
};