🔖 useReducer를 사용하여 상태 업데이트 로직 분리하기 📌 배운 내용 및 기억하고 싶은 내용 useState의 대체 함수 const [state, dispatch] = useReducer(reducer, initialState); state 는 우리가 앞으로 컴포넌트에서 사용 할...

🔖 useMemo를 사용하여 연산한 값 재사용하기 📌 배운 내용 및 기억하고 싶은 내용 관련되어 있지 않은 다른 상태를 관리하는 함수가 실행됬을때, 다른 함수가 작동하여 불필요하게 리렌더링 되므로 자원이 낭비되고 문제가 생김. 성능 최적화를 하기 위해 사용 useMemo에서 Memo 는 “memo...

🔖 useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 📌 배운 내용 및 기억하고 싶은 내용 Mount: 처음 나타났을 때를 의미 UnMount: 사라질 때를 의미 Update: 특정 props가 바뀔 때를 의미 useEffect: 특정 작업을 처리할 때 사...

🔖 useCallback을 사용하여 함수 재사용하기 📌 배운 내용 및 기억하고 싶은 내용 useMemo와 useCallback의 차이점 useMemo 는 특정 결과값을 재사용 할 때 사용한다. useCallback 은 특정 함수를 새로 만들지 않고 재사용하고...

🔖 export와 export default의 차이 📌 배운 내용 및 기억하고 싶은 내용 export 해당 모듈에는 여러 개의 개체가 있음 여러개의 개체를 내보낼때 사용 특정 개체만 따로 import 가능함 중괄호 필요함 원하는 이름으로 import 불가능 // Animals.js function Duck() { ret...

🔖 defaultProps로 기본값 설정 📌 배운 내용 및 기억하고 싶은 내용 defaultProps 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶을 때 사용 컴포넌트에 defaultProps 라는 값을 설정하여 사용하면 됨 // Hi.js import React fro...

🔖 React.memo 를 사용한 컴포넌트 리렌더링 방지 📌 배운 내용 및 기억하고 싶은 내용 React.memo : 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화하는 함수 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정가능 ...

🖥️ 로그인 화면 구현하기 ✏️ 이런 저런 이야기 토이프로젝트를 만들면 좋겠다고 생각하여 어떤 토이프로젝트를 만들지 고민하다가 로그인 화면을 구현을 생각하고 디자인을 생각하였다. 일단 로그인이 될려면 아이디와 패스워드 입력칸, 버튼이 있어야 한다. 기본적인 기능을 생각하고 자동완성 기능과 비밀번호 찾기 사이트텍스트링크, 회원가입 버튼을 추가하기로...

🔖 24장, 클로저 📌 배운 내용 및 기억하고 싶은 내용 클로저는 함수를 일급 객체를 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서 클로저의 정의 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. “그 함수가 선언된 렉시컬 환경”: 상위 스코프가 의미하는 실행 컨텍스트의 렉시컬 환경을 의미 ...

🔖 점의 위치 구하기 📌 문제 문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니...