코딩하는라민

[React] Styled Component (CSS-in-JS) 📌 CSS in JS? CSS in JS는 기존의 CSS 스타일링의 방식과 다르게 스타일 정의를 별도의 CSS 파일이 아닌 JS 파일에 작성하는 스타일 기법을 말한다. JS 파일에서 작성해서 바로 컴포넌트에 적용하기 때문에 손쉽게 스타일을 적용할 수 있다. CSS in Js 라이브러리에는 Styled Components, emotion, styled-jsx 등이 있다. 이러한 CSS in JS 라이브러리 중에서 가장 많이 사용되는 것이 Styled Component 라이브러리이다. 📌 Styled Component Styled Component 는 스타일링 파일을 따로 두지 않고 동일한 컴포넌트에서 컴포넌트 이름을 사용하듯 스타일을 지정할..

[React] Vite 차세대 프론트엔드 개발 툴 📌 Vite 란? Vite(프랑스어로 "빠르다(Quick)"를 의미한다. 발음은 /vit/ 이다. → '바이트' 라고 읽지 않도록 주의하자!! Vite 는 CRA(Create React App) 과 달리 구성 환경이 다른 프로젝트를 위한 빌드 툴이다. 속도가 굉장히 빠르기 때문에 요즘 CRA 보다는 Vite 를 많이 사용하고 있는 추세이다. Vite 에 대한 만족도와 관심도가 가장 높으며, 사용량도 빠르게 늘어나고 있다. 반면 Webpack 은 만족도와 관심도가 크게 감소했으며, 사용량이 소폭 감소했다. The State of JS 2022: 빌드 도구 기술 이름을 클릭하면 자세한 정보를 확인하고 관련 데이터를 자세히 볼 수 있습니다. 2022.state..

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..

[React] Hooks - Context API 📌 context 를 사용하는 이유 리액트에서는 데이터가 위에서 아래로 props를 통해 전달된다. 즉, 단반향 하향식 데이터 흐름이다. 여러 컴포넌트에 props 을 전해줘야하는 경우 굉장히 번거로워진다. props 를 하위 컴포넌트에 전달해줄 때 트리 단계마다 명시적으로 props 을 넘겨줘야하는데, context 를 이용하면 하위 컴포넌트들에 연쇄적으로 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 📌 context 를 언제 사용하는가 Header Container Nav 상위 컴포넌트 Header 부터 최하위 컴포넌트 Nav 가 있다고 해보자. Container 에는 props 를 전달하지 않고 Nav 에만 절달하고..

[React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌 ramincoding.tistory.com Mount Update Unmount ComponentDidMount ComponentDidUPdate ComponentWillUnmount 컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드 컴포넌트가 변화하는 순간에 사용할 수 있는 메서드 컴포넌트가 화면에서 사라지기..

[React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌더링되고, 업데이트 되고, 사라지는 과정을 말한다. 탄생 : 컴포넌트가 화면에 나타나는 순간 (Mount) → ex) 초기화 작업 변화 : state가 리렌더되는 과정 (Update) → ex) 예외 처리 작업 죽음 : 컴포넌트가 화면에서 사라지는 과정 (UnMount) → ex) 메모리 정리 작업 📌 컴포넌트에서 lifecycle 을 제어한다는 것은 무슨 의미일까? ✅ 클래스형 컴포넌트에서 사용 클래스형 컴포넌트에서는 DOM 요소를 가져오거나 서버에서 데이터를 가져오기 위해서 API 를 ..

[React] Hooks - useState ( ) 📌 useState 함수형 컴포넌트에서는 '상태' 를 관리할 수 없었다. 하지만 React 16.8 에서 Hooks 가 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다! '상태' 란 무엇일까? 상태는 컴포넌트에서 동적인 값을 말한다. 함수형 컴포넌트에서는 변하는 상태의 개별적인 업데이트가 요구된다. 클래스형 컴포넌트에서는 데이터를 교체하고 하나로 합친다. ✅ useState React 16.8부터 사용할 수 있게 된 Hooks 중의 하나인 useState 는 컴포넌트의 상태를 관리할 수 있다. useState()는 state와 state를 업데이트 하는 함수를 쌍으로 제공한다. const [state, setState] = useSta..

[React] form 제어하기 📌 form , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. state 를 누가 관리하느냐에 따라 제어 컴포넌트와 비제어 컴포넌트로 나뉘게 된다. element 를 가지고 있는 컴포넌트가 관리할 경우 제어 컴포넌트, element의 state 만 관리하지 않고 element 의 참조만 컴포트가 소유한다면 비제어 컴포넌트라고 할 수 있다. 아이디 비밀번호 찾기 📌 제어 컴포넌트(Controlled component) React 컴포넌트는 폼을 통해 사용자의 입력값을 제어할 수 있다. 컴포넌트의 state 를 '신뢰 가능한 단일 출처(Single Source of Truth)'로 만들어 HTML + React 요소를..

[React] 리스트(배열) 렌더링, Key 📌 JS 에서 리스트를 반환하는 방법 const arr = [1, 2, 3]; const arrChange = arr.map((arr) => arr + 1); console.log(arr, arrChange); map 함수는 배열 안의 요소로 새로운 배열을 반환한다. 원본을 변형하지 않는다. 리액트에서도 자바스크립트에서처럼 리스트를 반환하는 방법은 비슷하다! 리액트에서는 map 함수를 이용해 리액트 엘리먼트를 반환하면 된다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 📌 리액트..

[React] 조건부 렌더링 📌 조건부 렌더링 리액트에서는 원하는 동작을 `캡슐화`하는 컴포넌트를 만들 수 있다. 이렇게 하면 상태에 따라 몇 개의 컴포넌트만 화면에 효율적으로 렌더링할 수 있다. 조건부 렌더링은 특정 조건에 따라 다른 결과물을 렌더링하는 것이다. 리액트에서는 조건, 상태에 맞는 컴포넌트를 반환을 위해 if문이나 조건부 연산자를 사용한다. ✅ if문 사용해서 조건부 렌더링하기 조건에 따라 보여지는 컴포넌트또는 내용이 다를 경우 조건부 렌더링하면 된다. function Sleep(){ return console.log('Go to sleep'); } function Study(){ return console.log('Study...') } 두 함수 중에서 상태에 따라 하나의 컴포넌트만 보여..