JayGo 개발 연습장

제어 컴포넌트가 왜 필요할까?'상태가 변경되면 화면(UI)을 업데이트한다'는 것은 리액트의 핵심 컨셉 중 하나다.아래는 간단한 카운터 앱의 예시다. Counter 컴포넌트에 정의된 count가 button 태그의 onClick에 등록된 이벤트 핸들러 콜백 함수 setCount의 동작에 맞게 count를 변경하면 DOM이 리렌더링된다. 당연하게도 상태의 변경도 없고, 부모로부터 전달받은 props의 변경도 없으며, 부모 컴포넌트가 리렌더링 되지 않은 App 컴포넌트는 리렌더링 대상이 아니다. 따라서 App 컴포넌트의 h1 태그는 리렌더링되지 않는다.import { useState } from 'react';import './App.css';function Counter() { const [count, s..

감정 일기 프로젝트 개선New 페이지와 Edit 페이지 합치기확실히 유사한 틀을 갖고 있는 페이지를 하나로 합치고 차이를 Props로 관리하니 아래로 전달해줘야 했던 State들을 관리하기에도 좀 더 수월했다.유사한 UI를 갖고 있고, 다뤄야 하는 state와 props가 비슷한 경우엔 적절하게 페이지나 컴포넌트를 묶어서 만들어주는 게 좋을 수 있겠다는 걸 배웠다.커스텀 훅의 존재 목적은 아래 중 하나여야 한다.상태 관리: 커스텀 훅 내부에서 상태를 관리(useState), 외부 상태를 제공(useContext)해야한다.함수 반환: 컴포넌트에서 사용할 수 있는 함수나 데이터를 반환하고, 해당 반환값은 적절한 시점에 동작하도록 유도해야 한다.호출 즉시 동작을 실행하지 말아야 한다: 커스텀 훅 내부에서 어떤..

React 공부(모던 리액트 Deep Dive, 리액트 공식 문서)useState의 인자로 state의 초기값을 전달할 수 있다.만약에 인자로 콜백 함수를 전달하면(e.g. useState(() => { return 1 }) 최초 마운트 시에만 실행되며, 해당 콜백 함수의 리턴 값으로 state가 초기화된다.useState에 전달하는 함수는 순수해야 하고(순수 함수여야 하고), 인수를 받지 않아야 하며, 반드시 어떤 값을 반환해야 한다. 해당 반환 값이 state가 된다.setState 함수는 다음 번 state 값을 전달할 수 있다. 다만, setState(age + 1) setState(age + 1) setState(age + 1) 이렇게 같은 함수를 세 번 연속으로 실행하면 값은 1만 증가된다. ..

모던 리액트 Deep Dive들어가며(리액트의 역사), 리액트 개발을 위해 꼭 알아야 할 자바스크립트 챕터를 읽었다.몇 가지 기억에 남는 내용을 기록해둔다.리액트 이전엔 관심사를 HTML, CSS, JavaScript와 같이 분리하였지만.리액트도 관심사를 분리하지만, 관심사를 컴포넌트 기반으로 나눈다. 같은 기능을 하는 컴포넌트에 대해 HTML과 JavaScript가 함께 작성된다.컴포넌트 기반 관심사 분리, 단방향 바인딩, 선언적 UI 변경 등 리액트 생태계가 혁신적으로 성장할 수 있던 몇 가지 주요 키워드들이 있다. 앞으로 공부하면서 하나씩 깊게 잘 알아가봐야겠다.Props, 리액트 훅에서 사용되는 의존성 배열, Virtual DOM의 변경 여부 등 비교 연산이 필요한 경우가 많이 있다. 그래서, 리..

XML이란?JSX는 JavaScript XML(Extensible Markup Language)의 줄임말이다. 그렇다면 XML은 무엇인가?(개발 공부를 하다 보면 항상 이러한 재귀적 물음이 드는 상황이 자주 생기는 것 같다. 아무래도 지식이 아직 많이 모자라서 그런가 보다).XML은 데이터를 저장하고 전달하는 데 있어 확장 가능하고 유연한 문법을 제공하는 마크업 언어이다. 유사한 언어론 HTML이 있는데, HTML은 웹 페이지의 구조와 콘텐츠를 표시한다면, XML은 특정한 데이터를 표현하고 전송하기 위한 형식 언어라는 점에선 차이가 있다. 또한, HTML은 어느 정도 정해진 태그들을 활용해 웹의 구조를 표현한다면, XML은 사용자 정의 태그를 사용할 수 있다는 특징도 있다.아래는 XML을 사용해서 책에 ..

Udemy Git Hash를 사용할 때 앞에 7자리만 사용해도 된다. git log --oneline을 실행하면 축약된 로그를 볼 수 있고, 여기엔 7자리로 축약된 해시가 있다.일반적으로 Git에서 head는 branch를 가리키고, branch는 해당 브랜치의 가장 최신 커밋을 가리킨다. 즉, head와 branch는 보통 일치된 상태이다. 하지만, git checkout 를 통해 이전 커밋으로 이동한다면 head와 commit이 분리된 상태가 된다(detached 된 상태가 된다). 이런 상황에서 커밋이나 어떠한 동작을 하려고 하면 Git은 에러를 뱉어준다.해당 상황에서 head를 다시 가장 최신 커밋이 있는 branch 위치로 이동시키고 싶다면 그냥 git switch 을 해주면 된다. 상당히 간단..

Udemy Props Drilling이 발생하면 유지 보수도 어렵고, 디버깅도 어려울 수 있다. 이런 상황을 위해 리액트는 상태를 좀 더 쉽게 관리할 수 있도록 createContext 메서드를 제공한다.createContext는 컴포넌트들이 상태를 등록하고 사용할 수 있는 Context를 제공한다. Context는 애플리케이션에서 전역적으로 접근하고 싶은 데이터를 저장할 수 있는 공간이다.createContext는 보통 컴포넌트 외부에서 정의하고 호출한다. 컴포넌트 리렌더링 시 새로운 Context를 계속 다시 만들면 비효율이 발생하고, 관리되는 상태에 문제가 생길 수 있기 때문이다.createContext()의 결과로 생성된 컨텍스트 객체에는 provider와 consumer라는 메서드가 존재한다. ..

Virtual DOM(가상 돔)이란?Virtual DOM이란 직역한 대로 '가상의 돔'이다. 이러한 정의를 보면 당연하게도 'DOM은 무엇인가?'라는 물음이 따를 것이다.웹 페이지는 하나의 문서다. .docx 확장자 문서를 워드 프로그램이 실행하고, .hwp 확장자 문서를 한글 프로그램이 실행하는 것처럼, .html 또는 .xml 확장자의 문서를 브라우저가 해석하고 화면에 보여준다. 브라우저가 해석하는 문서는 사용자와의 인터랙션에 특화되어 있다는 점과, 서버와의 통신이 가능하다는 점 때문에 일반 문서와 다르게 느껴질 수 있다. 하지만, 사실 모든 웹 페이지의 실체는 문서이다.특별히 브라우저는 HTML 또는 XML로 작성된 문서에 자바스크립트 언어가 접근하여 조작할 수 있도록 객체로 변환(파싱)해주는데, ..

this는 함수 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다(모던 자바스크립트 딥다이브 p343). 이는 다른 클래스 기반 객체 지향 언어들의 this가 반드시 생성된 인스턴스를 가리키는 것과는 많은 차이가 있다. 함수가 호출되는 방식에 따라 동적으로 결정되기 때문에 유연하다는 장점은 있지만, this의 바인딩을 예측하기 어렵다는 문제가 있다.자바스크립트의 this 바인딩은 어떠한 경우에서도 일반 함수에서는 전역, 메서드에서는 호출된 객체, 생성자 함수에서는 인스턴스를 가리킨다. 이렇게만 생각하면 어렵지 않은 것 같지만, 사실 사용된 시점의 함수(또는 메서드)가 세 개 상황 중 어떤 상황에 해당하는지를 추론하는 건 생각보다 어려운 일이다.그래서, 그런 상황들 중 몇 가지를..

Udemy DOM을 리렌더링 하는 것은 굉장히 비싼 비용을 치러야 하는 작업이다. 따라서, 리액트에선 불필요한 리렌더링을 줄이는 것만으로도 웹 애플리케이션의 성능을 엄청나게 개선할 수 있다.리액트 훅과 리액트 내장 메서드를 사용해서 불필요한 리렌더링을 방지하기 위한 여러 방법이 있다.useMemo 훅과 리액트 내장 메서드인 memo는 메모이제이션 기법을 사용해 리렌더링을 최소화한다.메모이제이션이란, 컴퓨터 과학에서 동일한 연산을 반복하지 않도록 연산 결과를 메모해 두고(메모리에 저장해 두고), 해당 연산이 다시 호출됐을 때 메모된 연산이라면 결과를 바로 가져오도록 하는 기술이다.메모이제이션을 사용하면 불필요한 연산을 줄일 수 있으며, 리액트에서는 말 그대로 '불필요한 연산을 줄여줄 수 있다'.useMem..