본문 바로가기

전체 글

 (106)
TIL - [React] 리렌더링 동작을 제어하는 역할 useEffect, useRef 오늘은 useEffect와 useRef는 리렌더링 동작을 제어하는 역할을 하는 훅인데 어떤 상황에서 써야 하는지 자세히 알아봤습니다.  useEffectuseEffect 훅은 함수 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용됩니다. 사용 하는 경우데이터 페칭: 컴포넌트가 마운트 될 때 서버로부터 데이터를 가져오는 경우구독/해제: 웹 소켓이나 이벤트 리스너를 설정하고 정리하는 경우DOM 업데이트: 특정 DOM 요소의 속성을 직접 변경하는 경우타이머 설정: setTimeout, setInterval과 같이 타이머를 설정하는 경우useEffect는 컴포넌트가 마운트 될 때와 의존성 배열에 있는 값이 변경될 때 마다 실행되고 클린업 함수가 포함되어 있는 경우 컴포넌트가 언마운트 되거나 의존성이 변경되기 전에..
TIL - 리액트 컴포넌트 파일 구조 및 상태 업데이트 방식 개선 오늘은 개인 과제로 제출한 투두 리스트를 보완해서 재제출해야 했습니다. 튜터님의 해설 영상을 보고 제가 작성한 코드와의 차이점을 발견했으며, 컴포넌트 파일의 모듈화 및 캡슐화, 그리고 상태 업데이트 방식에 차이가 있는 것을 알게 되었습니다.컴포넌트 파일 구조 개선기존의 파일은 src 안에 TodoForm.jsx, TodoItem.jsx, TodoSection.jsx 등 파일들이 하나의 src 레포지토리에 있었습니다. 튜터님들은 components 폴더를 만들어서 관리하는 것을 보고 다음과 같이 개선했습니다:src/components/TodoFormindex.jsTodoForm.jsxTodoForm.csssrc/components/TodoItemindex.jsTodoItem.jsxTodoItem.csssr..
TIL - 이벤트 핸들러 연습 React 수업 과제에서 개인 과제로 "피카츄 놀이터 만들기"를 받았는데 이 과제는 이벤트 핸들러를 연습하는 과제였습니다.배경이 있고 피카츄가 그 배경에 키다운으로 위치를 이동하는 것이고 맵 크기는 10*10, 점프 기능 구현을 해야 해서 그리드로 배경이미지를 입혀서 컴포넌트 맵을 만드는 방법으로 생각했습니다.// App.jsximport "./App.css";import Map from "./components/Map";function App() { const MAP_WIDTH = 10; const MAP_HEIGHT = 10; const TILE_SIZE = 50; return ( );}export default App;// Map.jsxim..
TIL - 리액트로 투두리스트 만들면서 느낀 리액트의 장점 서론오늘은 투두리스트를 리액트를 활용해서 만들어 봤습니다. 이전에 바닐라 자바스크립트로 투두리스트를 만들 때는 콘텐츠 화면을 렌더링 하려면 사용자가 상호작용이나 애플리케이션 상태 변경에 따라 DOM을 조작하는 함수를 만들어서 실행시켜서 이벤트 처리하는 로직을 작성했어야 했습니다. 하지만 리액트에서는 state 값이 변경, 부모 컴포넌트의 props가 변경, 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 자동으로 리렌더링 하여  UI가 애플리케이션의 최신 상태를 반영해 줘서 훨씬 편리했고 코드도 간결하게 작성했다고 생각합니다.  투두 리스트를 만들면서 느낀 리액트의 장점JSX를 이용해서 HTML 태그와 유사하게 생겨 UI를 보다 직관적으로 표현이 가능해서 가독성이 좋습니다. useState Hook을 사용하..
TIL - 리액트 주요 개념 정리 리액트 주요 개념 정리 01. 가상 DOM가상 DOM의 장점가상 DOM은 실제 DOM을 흉내 낸 가상의 DOM입니다.성능 향상: React 같은 라이브러리는 가상 DOM을 사용해서 실제 DOM보다 빠르게 UI 변경사항을 관리합니다.가상 DOM을 이용하면 변경이 필요한 부분만 실제 DOM에 반영해줘서, 페이지 전체를 새로 불러오지 않아 훨씬 효율적입니다.이를 통해 높은 생산성과 서비스를 만들 수 있게 되었습니다. 02. JSX01. JSX의 정의JSX는 JavaScript를 확장한 문법으로, React에서 UI 구조를 표현하는데 사용합니다.HTML 태그와 유사하게 생겼지만 Javascript를 확장한 문법으로 완전히 다른 것 입니다.JSX는 React 라이브러리의 createElement 함수 호출을 보다..
TIL - React를 배우기 전에 JS 복습하기 다음 주 월요일부터 스파르타 코딩부트캠프에서 React를 배우게 되었는데 시스템이 분반으로 리액트 베이식-스탠더드-챌린지로 나뉘어있어서 리액트를 아예 처음 시작하지만 주말 동안 열심히 공부하면 되겠지 라는 생각으로 챌린지를 신청했습니다. 그래서 오늘은 리액트를 배우기 앞서 간단하게 리액트에서 자주 사용하는 JS 문법 복습하고자 했습니다. 리액트에서 많이 사용하는 배열 메서드// map() 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 반환const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]// filter() 주어진 함수로 구현된 조건에 맞는 요소로 새로운 배..
TIL - 클래스 정의클래스는 간단히 말하면 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀입니다. ES6 (ECMAScript 2015)부터 클래스가 공식적으로 JavaScript에 추가되었습니다. class MyClass { constructor(prop1, prop2) { this.prop1 = prop1; this.prop2 = prop2; } // 메서드 정의 method1() { // 메서드 내용 } method2() { // 메서드 내용 }}// 클래스의 인스턴스 생성const myObject = new MyClass(arg1, arg2); class 키워드를 사용해서 클래스를 정의하고 클래스 명에 대문자로 시작하는게 일반적인 관습입니다..
TIL - 크롬 개발자 도구 이용해서 에러 디버깅 서론오늘은 어제 문제 있었던 기존에 헤더 부분에 있었던 login.js와 common.js 파일에 있는 이벤트 리스너가 null값이어서 오류가 나는 문제를 해결했습니다. 위 에러의 가장 큰 문제점은 에러가 항상 나오는 것이 아니라 페이지 이동 또는 새로고침을 하면 가끔 나오는 에러라서 명확하게 고치기 힘들었습니다. 문제를 해결하는 과정1. DOMContentLoaded와 defer사용하기document.addEventListener("DOMContentLoaded", 함수로 감싸기); defer는 태그에 defer 속성을 사용하면 스크립트가 문서 파싱이 완료된 후에 실행하고 DOMContentLoaded는 HTML 문서가 완전히 로드된 후에 실행돼서 문제를 해결할 수 있다고 생각했는데 해결하지 못했습니..

티스토리툴바