개발기록

두 개의 컴포넌트의 상태를 보통 동시에 변경하고 싶은 경우가 있다. 이를 위해선, 양쪽에서 상태를 삭제해서 제일 가까운 공통 부모로 이동해, 거기서 상태를 props로 경유해 컴포넌트에 넘긴다. 이건 상태의 리프트 업(lifting state up)으로도 알려져 있고, React 코드를 적을 때 취급하는 가장 일반적인 작업 중 하나이다.배울 수 있는 것· 컴포넌트 간 상태 공유 방법· 제어된(controlled) 컴포넌트와 비제어(uncontrolled) 컴포넌트는 무엇인지 상태의 리프트 업 예시아래의 예시에선, 부모의 Accordion 컴포넌트가 두 개의 각 Panel을 렌더링한다.AccordionPanelPanel각 Panel 컴포넌트에선, 내용을 표시중인지 아닌지를 결정하는 불린형의 isActive..

import Image from "next/image";라는 코드에 제목과 같은 코드가 생겼다. .eslintrc.json 파일에 해당 코드를 넣어주면 된다.(이유는 궁금하지만 자야해서 여기까지만)"experimental": { "forceSwcTransforms": true},

일본어로 된 리액트 공식 문서를 번역하면서 state를 state라고 그대로 썼는데, 역시 상태가 좀 더 익숙한 것 같아서 여기선 '상태'라고 쓰겠다 -_- ;; 쾌적하게 변경 또는 디버그가 가능한 컴포넌트와, 보통 버그의 원인이 되는 컴포넌트의 차이는, 상태를 잘 구조화할수있는지이다. 여기선, 상태 구조를 고려할 때 쓸모가 있는 몇 개의 힌트를 소개하겠다.이 글에서 배울 수 있는 것1. 단일 상태 변수와 복수 상태 변수의 쓰임새 차이2. 상태를 구성할 때 피해야할 것3. 상태 구조의 일반적인 문제와 수정 방법 상태 구조의 원리상태는 쌓아둔 컴포넌트를 작성할 때, 상태를 몇 번 사용할 것인지, 데이터 구조를 어떻게 처리할지에 대한 선택을 할 필요가 있다. 최적이라곤 할 수 없는 상태 구조라도 올바른 프로..

React는 UI를 조작하기 위해 선언적인 방법을 제공한다. UI의 각 부분을 직접 조작하는 것이 아니라, 컴포넌트가 얻을 수 있는 서로 다른 상태를 서술하여, 사용자의 입력에 대해 그에 대한 상태를 교체한다. 이건, 디자이너가 UI에 대해 사고하는 방식과 비슷하다.이 글에서 배울 수 있는 것1. 선언형 UI 프로그래밍과 명령형 UI 프로그래밍의 차이2. 컴포넌트가 얻을 수 있는 여러 시각적 상태를 열거하는 방법3. 서로 다른 시각적 상태 간의 변화를 코드에서 발생시키는 방법 선언형 UI와 명령형 UI의 비교상호작용적인 UI를 설계할 때, 사용자의 행동에 대해 UI가 어떻게 변화할지 생각하는 경우가 많다. 예를 들어, 사용자가 대답을 전송할 수 있는 폼을 생각해보자.폼에 무언가 입력하면, "Submit"..

애플리케이션이 성장함에 따라, state의 구성 방법이나 컴포넌트 간 데이터의 흐름에 대해 더욱 더 계산적으로 생각해야 한다. 버그의 일반적인 원리는, 설명하려면 길지만, 어쩌면 중복된 state이다. 이 글에선, state를 적절하게 구조화하는 방법, state 갱신 로직을 유지보수가 쉽도록 작성하는 방법, 그리고 분리된 컴포넌트 사이에 state를 공유하는 방법에 대해 알아볼 것이다.이 글에서 배울 수 있는 것1. UI의 변화를 state의 변화로 인식하는 방법2. state를 적절히 구조화하는 방법3. 컴포넌트 간 state를 공유하기 위해 상태를 "리프트 업(끌어올리기)"하는 방법4. state가 유지될지 초기화될지 제어하는 방법5. 복잡한 state 로직을 함수로 정리하는 방법6. "props의..

React 컴포넌트는 서로 데이터를 주고받을 때 props라는 것을 사용한다. 부모 컴포넌트는 자식 컴포넌트에게 props를 넘겨줌으로써 전달할 수 있다. props는 HTML의 속성과 비슷하다고 생각될 수 있지만, props로는 객체나 배열, 함수 같은 모든 JavaScript에 존재하는 값을 넘길 수 있다. 익숙한 propsprops는 JSX 태그에 넘겨주는 정보를 말한다. 예를 들어, className, src, alt, width나 height는, 에 넘겨줄 수 있는 props의 예시이다. function Avatar() { return ( );}export default function Profile() { return ( );} 에 넘겨줄 수 있는 props의 종류는 미리..

JSX파일JSX는 JavaScript의 확장으로, JavaScript 파일 내에 HTML처럼 마크업을 작성할 수 있습니다. 컴포넌트를 작성할 수단은 그 외에도 존재하지만, 대부분의 React 개발자는 JSX의 간결함을 선호하기 때문에, 대부분 코드에 JSX가 사용된다. JSX: JavaScript에 마크업을 삽입이때까지는 HTML, CSS, JavaScript만을 사용해 페이지를 만들어왔다. 오랜 기간에 거쳐, 웹 개발자는 콘텐츠는 HTML으로 작성하고, 디자인은 CSS, 로직은 JavaScript 각각의 파일로 분리하여 만들어왔다. 콘텐츠가 HTML 내에 마크업되는 방법으로, 페이지 로직은 다른 파일의 JavaScript에 존재해온 형태였다. 그러나 웹이 좀 더 상호작용하는 형태로 변화하자, 로직이 콘..

ReactReact는 사용자 인터페이스 제작을 위한 자바스크립트 라이브러리의 하나다. 웹 페이지를 구성하는 DOM을 동적으로 제어하기 위해 JavaScript가 존재하고, 한 때는 쉽고 효율적으로 DOM을 제어할 수 있는 jQuery라는 것이 많이 사용되었다. 그러나 사용자와의 상호작용이 많아지고, 웹의 구조가 복잡해짐에 따라 DOM을 직접 조작하는 jQuery를 사용해 웹을 관리하는 것이 어려워졌고, 요소 배치를 위한 연산 또한 브라우저의 성능을 낮아지게 했다. 그렇게 등장하게 된 것이 React이다. React는 Facebook에서 개발한 라이브러리로, 현재 가장 많이 쓰이고 커뮤니티 또한 활발한 라이브러리이다.  장점React 공식 문서 가이드, 커뮤니티 등에서 많은 자료를 쉽게 접할 수 있음가비지..

ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출하는 도구다. 코딩 컨벤션이란 변수 선언 시 카멜 케이스로 작성해야한다거나, 전역 변수는 사용하지 않는 것 등의 코드 작성 시의 규칙을 뜻하고, 안티패턴은 성능, 디버깅, 유지보수 시에 부정적 영향을 줄 수 있어 지양하는 패턴이다.  Prettier는 사용자가 작성한 코드를 정해진 포맷대로 자동으로 변환해주는 도구다. npm install -D eslint eslint-config-prettier eslint-plugin-prettier prettier ESLint와 Prettier는 모두 코드의 품질 향상을 위한 도구인데, 두 도구는 각각 다른 코드 스타일을 적용하는 것을 지향하고 있어 두 도구를 같이 사용 시 충돌이 일어날 수 있다..

API는 Application Programming Interface의 줄임말이다. https://www.youtube.com/watch?v=s7wmiS2mSXY 해당 영상을 보면서 API에 대한 개념을 정리할 수 있었다.API는 요청을 가져와 시스템에게 사용자가 어떤 응답을 원하는지 전하고, 그 응답을 다시 사용자에게 보낸다.예를 들어보면, API를 식당의 웨이터라고 생각해보자.그리고 당신은 테이블에 앉아서 주문한 메뉴를 기다린다. 그리고 시스템의 한 부분인 주방에서는 당신이 주문한 음식을 준비한다. 여기서 부족한 것이 있는데, 당신의 주문을 주방에 전달하고 다시 당신에게 음식을 가져다주는 결정적인 연결점이다. 바로 그 끊어져있는 연결점 사이에 웨이터(API)가 자리를 잡는다. 웨이터는 당신의 주문(요..