Javascript/React (6) 썸네일형 리스트형 [React] Props Drilling의 문제점과 해결방법 Props Drilling ? props drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. 아래는 props drilling의 예시 코드입니다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({content}) { return ( I am the first component; | ); } function SecondComponent({content}) { return ( I am the second.. [React] useRef Hook의 이해와 활용 useRef ? React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때마다 다시 렌더링이 됩니다. 대부분의 경우에는 상태가 변할 때마다 React 컴포넌트가 함수가 호출되어 화면이 갱신되기를 바랍니다. 하지만 그에 따른 부작용으로 함수 내부의 변수들이 기존에 저장하고 있는 값들을 잃어버리고 초기화하는데, 간혹 다시 렌더링이 되더라도 기존에 참조하고 있던 컴포넌트 함수 내의 값이 그대로 보존되어야 하는 경우가 있습니다. 이때 사용할 수 있는 Hook이 useRef입니다. useRef 함수는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 이 current 속성의 값은 상태를 변경할 때처럼 React 컴포넌트가 다시 렌더링 되지 않습니다. 또한 다시 렌더링.. [React] React 렌더링 최적화와 Hooks 렌더링이란? 리액트에서 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미합니다. 브러우저에서 렌더링이란 DOM 요소를 계산하고 그려내는 것을 의미합니다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 렌터 트리를 형성하고 최종적으로 브라우저에 그려지게 됩니다. 그리고 우리는 브라우저에서 제공하는 DOM API를 Javascirpt를 통해 호출하면서 그려진 화면을 변화시킵니다. 하지만 Vanilla Javascript를 이용하여 DOM에 직접 접근하고 수정하는 것(명령형), 그리고 이를 최적화하는 것은 애플리케이션의 규모가 커지면 커질수록 관리하기가 힘들어집니다. 그래서 애플리케이션에서 보여주고 싶은 핵심 UI를 "선언"하기만 하면 실제로 DOM을 조작해서 UI를 그래내고, 변화시키는.. [React] React(Typescript)에 ESLint/Prettier/Airbnb Rule 적용하기 + Husky 코딩스타일은 팀마다 다르지만 이를 개인에게 지키도록 하는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일과 관련한 논쟁이 이어지다 보면 정작 신경 써야 할 프로젝트에 에너지를 쏟지 못하는 상황이 발생합니다. 이러한 불필요한 에너지 소모를 줄이기 위해 코딩 스타일 자동화 툴이 필요합니다. 처음 설정은 복잡하지만 한번 적용해 두면 추후에 적용하기 쉽고, 처음에 적용해 둔 것이 지속적인 개발 생산성 향상에 도움이 됩니다. 협업 시 많이 사용되고 있는 ESLint Airbnb rule 세팅을 해보도록 하겠습니다. 1. CRA 먼저 터미널을 키고 create-react-app을 통해 Typescript 리액트 프로젝트를 만들어 줍니다. npx create-react-app [프로젝트 이름] -.. [React] ESLint와 Prettier, Git Hook을 이용한 협업 Lintter & Code Formatter 하나의 프로젝트에서 작업자마다 각자 다른 코딩 스타일을 가지고 있고, 그것이 코드에 드러난다면 이 프로젝트를 제 3자가 읽기도 어려워지며, 팀원끼리도 다른 팀원들이 작성한 코드를 읽고 이해하기 힘들어 집니다. 이러한 요소들은 결국 비효율을 유발하게 되고 이를 극복하기 위해서 팀으로 작업을 할 때에는 여러 작업자들의 코딩 스타일을 일치시키기 위한 Lintter와 Code Formatter를 사용하는 것이 좋습니다. 자바스크립트 진영에서는 Linter로 ESLint를 Code Formatter 로는 Prettier를 사용하는 것이 일반적입니다. ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함하고 있지만, Prettier는 자동으로 코드의 .. [React] React Router 사용하기 Single Page Application이라는 용어 그대로 SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 것은 아닙니다. 화면이 변경되기 위해선 주소 또한 달라져야 할 필요가 있는데 이렇게 다른 주소에 따라 다른 화면을 보여주는 과정을 '경로에 따라 변경한다'라는 의미로 라우팅(Routing)이라고 합니다. React는 View에 중점을 둔 프런트엔드 라이브러리이기 때문에 React 자체만으로는 라우팅 기능을 사용할 수 없다. 별도의 라이브러리를 설치해야지만 라우팅 기능을 사용할 수 있는데 통상적으로 React Router라는 라이브러리가 가장 많이 사용됩니다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 C.. 이전 1 다음
