Jeden Tag, aufrichtig und lustig.

1. 발생 이슈 새로운 블록이 추가되는 기능을 구현하던 도중 컴포넌트의 key값과 관련하여 문제가 발생했다. 블록 추가 버튼을 눌렀을 때 기대했던 것은 한개의 블록이 추가되는 것이었는데, 실제로는 동일한 idx값을 가진 두 개, 세 개, 때로는 네 개의 다수의 블록이 동시에 추가되는 현상이 발생했다. 빠르게 버튼을 연타하지도 않았기 때문에 블록의 상태 관리와 추가되는 새 블록의 상태관리 로직을 살펴보고 콘솔로도 확인을 해보며 디버깅을 했다. 2. 문제 이유 블록이 렌더링 될 때마다 key값이 새로 할당 되는 로직이 문제였다. 리액트에서는 key라는 속성을 활용해서 자식 컴포넌트들을 유니크하게 식별한다. 그렇기 때문에 렌더링할 때마다 모든 블록 컴포넌트의 key 값이 변경 되면 리액트가 올바르게 컴포넌트를..

기존에 진행한 프로젝트의 성능을 개선 할 수 있는 방법을 찾는도중 디바운싱 개념을 알게되었다. 나중에도 유용하게 사용할 수 있을 것 같아 정리해보았다. 1. 개념 및 사용 이유 디바운싱은 연속적으로 함수 실행 요청을 하는 경우 가장 마지막 요청만 수행하는 것을 의미한다. 디바운싱은 연속적으로 함수를 실행하는 것은 서버에 부담을 줄 수 있기 때문에, 이 부담을 경감하기 위해 사용 될 수 있다. 2. 적용 예시 아래 코드는 계정을 검색 할 수 있게 만들어주는 코드다. useEffect(() => { if (userInput) { getSearchUser(userInput) .then((data) => { setUserArr(data); }) .catch((error) => { console.log(error..

state는 리액트에서 많이 사용 된다. 비중 있게 사용되는 만큼 사용 이유와 사용 방법을 정리해 보았다. state 사용 이유 데이터를 저장하는 방법에는 state를 사용하는 방법 외 변수에 저장하는 방법도 존재한다. 하지만 변수는 값이 변경되는 경우 html에 자동으로 반영이 안되는 반면 state는 값이 바뀌면 html이 자동으로 재렌더링을 한다. 이와 같은 차이점으로 자주 변경이 되는 html요소는 state로 값을 저장하여 데이터바인딩을 하는 것이 좋다. state 사용 방법 1. import state는 import를 해야 사용 할 수 있다. 보통 useState 단어를 입력하면 아래와 같이 상단에 자동으로 import 된다. ->import {useState} from 'react' 2. 구..

JSX 문법은 자바스크립트 파일 내에서 html을 표현할 때 사용되는 문법이다. 리액트에서 많이 사용되는 JSX 문법은 아래와 같다. 1. className JSX 문법과 html 문법의 차이점 중에 하나로 class를 부여할 때 'className'으로 카멜케이스를 활용해서 사용 해야 한다. 이를 사용해서 app.js파일에서 클래스 이름을 부여 하면 app.css에서 css하는데 활용 할 수 있다. *css파일은 app.js파일 내에 import 해야 적용할 수 있다. 2. 데이터바인딩시 {중괄호} 활용 리턴 문 밖에서 정의한 변수를 리턴안에서 활용(데이터 바인딩) 하고 싶다면 중괄호 안에 변수를 넣으면 적용 가능하다. 변수는 컨텐츠 내용 넣을 때나 클래스 이름 작명 할 때도 범용적으로 사용가능하다 i..

> 7주차부터 11주차는 자바스크립트를 마무리하고 리액트를 새로 배우는 기간이었다. 💛 Fact 학습내용 리액트 시작 (컴포넌트, JSX문법), 초초초기초반 수강(클로저) 1만시간의 법칙 페어프로그래밍 1일 1커밋 세번째로 성공한 주 한달 전부터 혼공자 북스터디,알고리즘 스터디 시작 반편성 시험 DOM 책 집필 완성 ❤️ Feeling 리액트 새로워서 낯설다. 드디어 클로저를 이해했다! 페어프로그래밍 할 때 클래스명 맞추고 협업하는 것이 쉽지 않다. 커밋하는 것을 잊어버릴 때가 있다. 어려운 JS개념을 혼공자책을 통해 이해할 수 있었고, 알고리즘 문제풀이를 통해 메서드나 JS를 활용하는 것을 연습할 수 있었다. 시험문제중 구현문제가 어려웠다. 💜 Finding 다회독이 이해하는데 큰 힘이 되므로 리액트 ..