좌충우돌 개발자의 길

1. 리액트에서 성능 개선을 해보자 성능 개선 / 최적화를 위한 기능으로 다양한 훅을 제공하고 있다. 그중에서 useMemo / useCallback / React.memo 3가지에 대해서 공부하고 정리하겠다. 2. useMemo memo : memorization 의 약자로 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일하게 입력이 들어오면 재활용하는 프로그래밍 기법이다. 2-1. useMemo의 장점 : 무거운 동작 과정을 가볍게 바꿔준다. 함수형 컴포넌트의 동작 과정 : 렌더링 -> Componenet 함수 호출 -> 모든 내부 변수 초기화 useMemo 사용 후 동작 과정 : 렌더링 -> Component 함수 호출 -> Memorize 된 함수를 재사용 내부변수 초기화를 위한 함수를 호..

출처 : 유데미 React 완벽 가이드 const redux = require('redux'); const counterReducer = (state={counter: 0}, action) => { // 리듀서 : 받아온 action으로 데이터 바꾸기 해줌 (현재상태, action) if (action.type === 'increment') { return { counter: state.counter + 1 }; } if (action.type === 'decrement') { return { counter: state.counter - 1, }; } return state; // 다른 타입의 액션이면 현재상태인 state가 리턴됨 }; const store = redux.createStore(count..

1. Styled-Components에 타입스크립트 사용하기 - 변환 전 자바스크립트 코드 export const Modal = styled.div` display: ${(props) => props.display}; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; background-color: rgba(0, 0, 0, 0.6); ` - 변환 후 타입스크립트 코드 export const Modal = styled.div` display: ${(props: { display: string }) => props.display}; align-items: center; position: fixed; ..

1. 컴포넌트 props 타입 정의하기 - 변환 전 자바스크립트 코드 const goalCard = (data) => { return ; }; ... function GoalCard({ data }) {...} - 변환 후 타입스크립트 코드 const goalCard = (data: GoalDataInfo) => { return ; }; ... function GoalCard({ data }: GoalProps) {...} // 타입 설정 export interface GoalDataInfo { startYear: string; startMonth: string; startDate: string; endYear: string; endMonth: string; endDate: string; goalCont..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

hook hook 불면 기능이 넘치는 커다란 리액트 훅~ 1. hook은 리액트에서 제공하는 내장 hook과 내가 직접 만든 custom hook으로 나뉜다 - 리액트에서 제공해주는 내장 hook : useState, useEffect, useParams,.... 등등 - custom hook : use___ 이렇게 작성! (여태 나는 반대로 알고 있었다 머쓱~) 2. hook 사용 시, 꼭 지켜야 할 규칙들 - 최상위에서만 hook 호출하자 (반복문, 조건문, 중첩된 함수 내에서 실행 금지!) - React 함수 컴포넌트 내에서만 hook 호출하자 3. 내장 hook - 기본 hook 1) useState 2) useEffect => 이 두 hook은 다른 글에서 자세히 다루었으므로 생략! 3) use..

문제점 - 이전 글에서 말했듯이 또다른 복병이 생겨났다. 바로 초기화면에서 댓글이 아예 보이지 않는 것이다. 원인을 파악했더니 useState에 초기값을 아무것도 설정하지 않아서 발생한 것이었다. 내가 생각한 해결방안 - 그래서 이전에 댓글 불러오는 컴포넌트를 따로 만들었었는데 그 컴포넌트를 재활용해서 초기 댓글 불러오기 위한 용도로 사용했다. const commentsInit = useAxios(`/api/comment/${userId}`); //이렇게 먼저 db에 저장된 초기 댓글을 가져와 commentInit에 담고 const [comments, setComments] = useState(commentsInit); //그 commentInit을 초기값으로 설정하자고 생각했다. 문제점 발생 - 하지만..

- 구현 목표 : 댓글을 쓰면 새로고침없이 댓글창이 바로 나올 수 있도록 바꾸는 기능 구현하기 (카톡처럼!) - 내가 생각한 방법 : useEffect를 써서 comment가 새로 들어올 때마다 업데이트할수 있도록 짜자 import { useEffect, useState } from "react"; import axios from 'axios'; export default function useAxios(url) { const [data, setData] = useState([]); useEffect(() => { axios.get(url) .then(res => { return res.data.body; }) .then(data => { setData(data); }) .catch(error => { ..

문제상황 ... 위의 코드로 user 데이터를 withDraw함수에 전달하려 했다. 하지만 드롭박스를 여는 버튼을 누를 때 withDrawl함수도 같이 실행되는 기이한 현상이 벌어졌다.. 회원탈퇴 버튼을 눌러야 withDrawl함수가 나와야하는데 말이다... 그래서 파라미터를 전달하는 방식에 문제가 있는 것으로 판단하여 구글링을 해봤다. 해결방안 에러가 났던 이유 : onClick에 함수 자체를 전달해야하는데 나는 withDawl(user)로 결과값을 전달한 것이었다!!! 해결 코드 : 다음과 같은 방식으로 전달하면 된다 withdrawal(user)}> React onClick함수로 파라미터를 전달하는 방법 Hiring Assessment에서 리액트로 이미지를 클릭했을 때 해당 이미지가 변경되는 페이지..