개발 일지

리액트의 전체적인 흐름을 이해하기 위해서는 라이프 사이클에 대한 이해가 필요하다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 제공되기 때문에 클래스형 컴포넌트로 대략적인 컨셉에 대해 설명 후, 함수형 컴포넌트에서의 라이프 사이클에 대해 설명한다. 1. 라이프사이클 메서드 이해하기 리액트의 라이프사이클 메서드는 9가지가 있다. 큰 단위로는 마운트, 업데이트, 언마운트 이렇게 세 가지 영역으로 나뉠 수 있다. 마운트(Mount) : 페이지가 컴포넌트에 나타남 (페인팅) 업데이트(Update) : 컴포넌트의 정보를 업데이트 (리렌더링) 언마운트(Unmount) : 페이지에서 컴포넌트가 사라짐 1-1. 마운트(Mount) 컴포넌트가 처음으로 DOM에 그려질 때를 의미한다. 따라서 컴포넌트의 초기 설정과 데이..

html에서 특정 DOM 요소에 id 값을 부여하는 것처럼 리액트에서도 특정 DOM 요소에 이름을 부여할 수 있는 기능이 있다. 바로 ref(reference의 줄임말)이다. 🧐 리액트에서 id을 사용하면 안될까? JSX안에서 DOM의 id를 달게 될 경우, 컴포넌트가 렌더링될 때마다 이 id값을 전달하게 되는데, 만약 이 컴포넌트를 여러 곳에서 사용하게 되는 경우 Id 값이 중복으로 사용하게 될 경우가 발생한다. id는 고유한 값으로 만들어져야 하는데, 이를 위반하게 되므로, 리액트 팀은 id 사용을 권장하지 않는다. 대신 ref는 컴포넌트 내부에서만 작동하므로 이러한 걱정을 하지 않아도 된다. 5.1 ref는 어떤 상황에서 사용해야 할까? 특정 DOM에 작업할 때 ref를 사용한다. 그래서 그 특정 ..

이벤트(Event): 웹 브라우저에서 DOM 요소가 상호 작용하는 것 리액트에서의 이벤트 시스템 4.0 Triggering, Rendering, Commiting 리액트가 웨이터라고 생각하면 Triggering: 사용자가 어떤 동작을 행했는지 알려주는 행위 (주방에 주문을 전달한다.) Rendering: 화면의 생김새를 그리는 행위 (주방에서 주문한 음식을 준비한다.) Commiting: DOM에 전달해서 실제 브라우저에 출력하는 행위 (음식을 다시 사용자에게 서빙한다.) [STEP 01] 렌더링 (1) 최초 렌더링 - 최초로 화면을 그리는 행위 (2) state 업데이트시 재 렌더링 - 화면에서 보여주는 값 중 상태가 변경된 값이 있을 경우 화면을 다시 그리는 행위 최초 렌더링 이후에는 setter함수..

리액트의 또다른 코어 컨셉 중 하나인 State에 대해 알아보자. 리액트를 한 번이라도 접해본 사람이라면 "상태값"이라는 단어를 아마도 많이 들어봤을 것이다. 이 상태값인 "state"는 말 그대로 상태가 변경되는 값으로 컴포넌트 내부에서 변경될 수 있다. 웹 브라우저에서는 다양한 상호작용으로 인해 화면 자체에 빈번한 변화가 생긴다. 예를 들면, 폼 안에 입력 필드를 수정하면 업데이트되고, 슬라이드 되는 화면에서 "다음"버튼을 누르면 다음 슬라이드가 보이며, "장바구니에 담기"를 클릭하면 장바구니에 담기는 것들이 모두 interaction이다. 컴포넌트들은 현재 input의 입력 값, 현재의 슬라이드 페이지, 장바구니 등을 "기억"해야 한다. 리액트에서는 이러한 종류의 컴포넌트 별 메모리(기억 저장소 쯤..

연습문제를 작성해보기에 앞서 프로젝트 세팅을 해보려고 한다. 번들러는 Vite를 사용하였고, Vite + Typescript + SWC 를 사용하여 프로젝트를 생성하였다. 아래 명령어를 입력하여 간단하게 Vite 프로젝트를 시작할 수 있다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io SWC는 Speedy Web Compiler의 약자로, Rust로 만든 자바스크립트 컴파일러 & 번들링 툴이다. 찾아보니 주로 Next.js와 호환하여 많이 사용하는 듯하다. (참고 글 : https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/ ) 아무튼..

리액트란? - UI를 랜더링하기 위한 자바스크립트 라이브러리이다. - 공식문서 리액트를 설명하기에 앞서 대부분의 자바스크립트 기반의 프레임워크는 MVC(model-view-controller), MVVM(model-view-view-modal) 아키텍쳐를 사용한다. 여기서 모델은 데이터를 직접관리하는 영역 / 뷰는 사용자에게 보이는 영역 / 컨트롤러는 모델 데이터 조회, 수정, 변경된 사항을 뷰에 반영하는 영역이다. 일반적으로는 사용자의 어떤 행위가 발생하면 컨트롤러를 통해 뷰를 수정한다. 어떤 데이터가 변할 때마다 어디가 변했는지를 확인하는 것보다 그냥 아예 뷰를 갈아끼우는 방법을 고안한 것이 바로 리액트이다. 리액트는 정해진 규칙에 따라 뷰를 새로 렌더링하기로 한 오직 뷰(View) 만 신경쓰는 라이..

🤔 미들웨어는 무엇인가? action에서 선언된 state를 변경하는 부분이 dispatch를 통해 실행되기 전에 동작한다. 즉, action 과 dispatch 사이에서 일어나는 동작을 제어하는 도구라고 이해하면 되겠다. 비동기를 구현할 때 용이하며, 리덕스에 비동기 관리 tool로는 redux-thunk, redux-saga 정도가 있다. [기본 템플릿] const middleware = store => next => action => { (1) next(action) //기본 기능 : action이 dispatch를 통해 실행된다. (2) } 함수가 중첩된 형태이다. 파라미터가 3개 이고 return 문이 2개인 고차함수 형태이다. 이를 function 으로 다시 작성해본다면, function mi..

👉 관심사의 분리 (Seperation of Concerns) : 특정한 관심사에 따라 기능을 구분하여, 각 기능들마다 개개의 관심사를 해결하기 위한 코드를 작성하는 패턴이다. 함수를 최대한 간결한 형태로 구현하여, 프로세스의 복잡도를 낮추고, 재사용성을 높이며, 유지보수를 원할하게 합니다. 리덕스도 이 "관심사의 분리"를 통해 폴더 구조를 나누어 볼 수 있는데, 크게 나뉠 수 있는 파트가 "리듀서(reducer)"와 "액션(action)" 이다. 예를 들어, 데이터를 기준으로 유저와 관련된 기능들은 user.js 에 다 넣어두고 사용, 마찬가지로 게시글과 관련된 기능들은 boards.js에서 관리한다. 리듀서 같은 경우는, 순수함수로 정의가 되어 있기 때문에 분리하기 굉장히 편리하다. const ini..

1. React 기본용어 React : UI를 만들기 위한 자바스크립트 라이브러리 CRA : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain node.js : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실행 환경 npm : node package manager. node로 실행되는 여러가지 패키지들을 관리함 node-modules : package들 관리하는 파일 .gitignore : github에 올리지 않을 파일들의 모음. 기본적으로 node modules는 ignore에 들어가있다. package.json : dependencies를 통해서 필요한 모듈을 설치해준다. index.js : import React..

Props 컴포넌트에 내장되어 있는 객체이다. 그 중에서 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주는 객체이다. 넘겨주고 싶은 정보는 부모 영역에 존재한다. 자식 요소에게 넘겨주고 싶을 때 : 작명 = {변수명} 📌부모 컴포넌트 import React, {Component} from "react"; import Child form "./Child/Child"; class Parent extends Component { render(){ const name ="Kim"; test = () => { console.log('테스트입니다') } return ( Parent ); } } export default Parent; 📌자식 컴포넌트 import React, {Component} f..