🌊 Hook - useMemo : useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다. { type : 'INCREMENT', // 다른 값들이 필요하다면 추가로 들어감 } useMemo 리스트에 숫자를 추가하고 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트 import React, { useState } from 'react'; const getAverage = (numbers) => ..

🌊 Hook - useReducer : useReducer는 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Reducer는 현재 상태, 그리고 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수이다. Reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state, action){ return {...}; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다. } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요..

🌊 TIL : 2023년 4월 16일 오늘 배운 것 피그마 클론 useEffect useState REST API 어려웠던 부분 디자이너 존경해야지 더 공부할 것 React Hook

🌊 Hook - useEffect : useEffect는 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. useEffect import React, { useState } from 'react'; export default function Info() { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(() => { console.log('렌더링 완료'); console.log({ name, nickname }); }); const onChangeName = (e) => { setName(e.target.value); }; const onChangeNickname..

🌊 Hook - useState : useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. useState import React, { useState } from 'react'; export default function Counter() { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다.{' '} setValue(value + 1)}> setValue(value - 1)}> ); } useState는 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState함수의 파라미터에는 상태의 기본값, 초기값을 넣어줍니다. 현재 0인..

🌊 TIL : 2023년 4월 16일 오늘 배운 것 append와 appendChild의 차이점 비동기와 동기 타이머 함수 더 공부할 것 rest api

🌊 타이머 : 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 제공하는 함수이다. 타이머 생성 함수 : 일정 시간이 경과된 이후 콜백 함수를 호출, 비동기 처리 방식으로 동작한다. setTimeout : 단 한 번 동작한다. setInterval : 반복해서 동작한다. 타이머 제거 함수 clearTimeout clearInterval 타이머 함수 setTimeout / clearTimeout const timeout = setTimeout(func|code[, delay, param1, param2]) func : 타이머가 만료된 뒤 호출될 콜백함수 delay : 타이머 만료 시간은 밀리초..

🌊 쇼핑 목록앱 만들기 구현 요소 완료 HTML/CSS + 버튼을 누르면 리스트 추가하기 input을 입력후 엔터를 누르면 리스트 추가하기 휴지통 버튼을 누르면 해당 리스트 삭제되기 느낀점 이렇게 금방 끝낼 줄 알았으면 저번에 완료할 걸.. 구현 방법 HTML Shopping List 고민했던 부분 클래스명 짓기 조금 더 직관적으로, 남들이 알아 볼 수 있게 정하고자 했다. 버튼 안에 div 태그 사실 가상요소 선택자인 before, after로 하는 것이 더 좋은 방법일 거라고 늘 생각해서 선호하지 않는 방식이나 이렇게 한 번 구현해봤다. CSS @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/P..