[REACT] useMemo와 React.memo의 차이점

리액트 훅을 배우다보면 자연스럽게 알게되는 useMemo와 React.memo는 같은 'memo'라는 단어를 사용하는데다 최적화를 위해 사용하는 것이라, 괜히 헷갈렸던 차에 스스로 정리차 올려보는 글.useMemo와 React.memo는 둘 다 불필요한 연산과 리렌더링을 방지하는 최적화 기법이지만, 적용 대상과 방식이 다르다! 오늘은 두 개를 구분하여 적고 설명해보고자 한다.1. useMemo → 값 (연산 결과)를 캐싱" 이 연산, 다시 계산할 필요 있어? "특정 연산(예: 배열 필터링, 정렬, 무거운 계산)의 결과값을 메모이제이션해서, 불필요한 연산을 방지하는 역할.의존성 배열의 값이 바뀌지 않으면 이전 값을 재사용.useMemo의 종류는 'hook'사용 예시 import { useState, use..

• format_list_bulleted Study/REACT
• · 2025. 3. 25.

[REACT] React Hooks 정리 및 사용법

리액트를 하다보면 리액트 훅은 무조건 알아야 할 필수적인 요건! 가장 기본적이고 기초적인 만큼 여기다가 정리해서 적어보고자 한다. 정리하면서 다시 한 번 복습하기는 덤 ✌👀 React Hook란?React Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 도와주는 기능! 기존에는 클래스형 컴포넌트에서만 상태(state)와 생명주기 메서드(componentDidMount, componentDidUpdate 등)를 사용할 수 있었지만, Hook을 활용하면 함수형 컴포넌트에서도 이를 쉽게 구현할 수 있습니다. (리액트 v16.8부터 새로 도입되었다고 해요)생명주기란?React에서 생명주기란 컴포넌트가 화면에 나타나고, 업데이트되고, 사라지는 과정을 의미합니다.컴포넌트가 처음 나타날 때 ..

• format_list_bulleted Study/REACT
• · 2025. 3. 15.

[투두리스트/ React] 수정 기능 추가

투두리스트를 추가하고 삭제, 검색 기능까지 다 만들어두고 나니 뭔가 아쉬워서 좀 더 추가해봤다. 투두를 적어두고도 맞춤법 하나가 틀렸다든가 내용을 수정해야 할 때마다 지우고 새로 만드는 것보다 UI를 추가하는게 훨씬 편리하니까! 그런데 넣다보니 하나씩 뭐가 부족하고... 뭐가 이상하고... 그래서 차근차근 하나씩 추가했고, 작업 순서대로 글을 작성해봤다. 1. Todo 수정 기능 추가하기수정 버튼을 클릭하면 "수정 모드"로 변경input 필드를 활성화 해서 내용을 수정 가능하도록 변경저장 버튼을 따로 만들지 않고, 같은 버튼을 다시 누르면 저장 & 수정 모드 종료// react// App.jsx -> List.jsx -> TodoItem.jsx 로 전달한다.// 수정중이라면 true, 아니라면 false..

• format_list_bulleted Study/PROJECTS
• · 2025. 3. 2.

[자바스크립트] 콜백 함수(Callback function)란?

콜백 함수... 회사에서 기능 수정을 할 때 활용하라는 조언을 듣기도 했고, 요새 js 기초 공부를 다시 하기 시작하는 김에 블로그에도 정리차 남겨보고자 한다!! 😊콜백 함수란?Callback의 뜻부터 알아보자. 'callback'은 답신 전화, 회신이라는 의미를 갖고 있다. 답신 전화를 하기 위해선 먼저 전화를 받아야 하지 않는가? 콜백은 프로그래밍에서도 마찬가지로 "나중에 실행할 함수"를 다른 함수에 전달하는 것이다. 다른 말로하면 다른 함수의 인자로 전달되어 나중에 실행되는 함수 라고도 할 수 있다. 함수도 값처럼 전달할 수 있기 때문에, 특정 시점에 원하는 기능을 실행할 수 있도록 콜백을 활용한다!콜백 함수는 비동기 처리, 유연한 함수 구현, 배열 처리 등 다양한 상황에서 사용된다. 이번 글은 ..

• format_list_bulleted Study/JAVASCRIPT
• · 2025. 2. 12.

다국어와 반응형을 동시에! CSS 논리적 속성 쉽게 배우기

최근 일이 너무 바빠 공부가 더딘 요즘 ㅜㅠ... 중앙 정렬을 위해 평소처럼 margin: 0 auto;를 쓰다가 새로운 속성을 알게되어서 공부+정리 겸 CSS 논리적 속성에 관한 글을 쓰고자 합니다. CSS에서 놓치기 쉬운 다국어와 반응형 이야기 왜 다국어와 반응형을 같이 고민해야 할까? 웹사이트를 만들 때, 한국어만 고려하면 쉽습니다. 하지만 영어, 일본어, 아랍어, 힌디어 같은 다양한 언어를 지원하려면 이야기가 달라지죠. 특히, 쓰기 방향이 달라지는 언어는 레이아웃까지 영향을 미치기 때문에 신경 써야 합니다. 게다가 요즘은 모든 화면 크기에 맞게 레이아웃을 조정해야 하니, 다국어와 반응형을 동시에 고려할 수밖에 없습니다. 전통적 CSS 방식이 가진 문제 기존 방식에서는 다음과 같은 문제가 자주 발생..

• format_list_bulleted Study/CSS
• · 2024. 11. 29.

시맨틱 태그 이해하기: 올바른 HTML 구조 설계 가이드

웹 접근성에 관해 관심과 지식은 늘 있었으나 제대로 공부하진 못한 것 같아서 요새 기초부터 다시 조금씩 다지고 있습니다. 그런 김에 그 기초중의 기초! 시맨틱 태그에 관한 글을 써보려 합니다✌시맨틱 태그(Semantic Tag)란?시맨틱이란 단어는 '의미론, 의미론적인'을 뜻합니다. 시맨틱 태그는 HTML5에서 도입된 개념으로, 말 그대로 '의미를 담고있는 태그' 를 의미합니다. 예를 들어, , , 같은 태그는 이름만 보고도 해당 영역의 의미를 쉽게 파악할 수 있어 웹사이트의 구조 파악 또한 쉬워집니다.시맨틱 태그의 장점웹 접근성 향상: 시맨틱 태그를 사용하면 스크린 리더와 같은 보조 기술이 콘텐츠의 구조를 이해하기 쉽게 만들어, 시각장애인 등 다양한 사용자에게 더 나은 접근성을 제공합니다.SEO..

• format_list_bulleted Study/HTML
• · 2024. 10. 25.