react

[React] Custom Component Styled Components Styled Components는 CSS in JS 라는 개념이 대두되면서 나온 라이브러리 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의

컴포넌트 UI 개발을 위한 Storybook Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했습니다. Component Explorer에는 많

React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다고 배웠습니다. 하지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 합니다. 이럴 때 사용할 수 있는 것이 바로 useRef 라는 Hook 함수입니다.지

dom을 직접 건드리는 작업은 번거롭다.React의 발상 : dom을 전부 날려버리고 다시 만들어서 보여주자문제점 : 매번 이렇게 하게되면 다양한 문제가 발생해결 : 메모리게 가상DOM을 만든다.업데이트가 필요한 부분만 가상DOM으로 수정한다.그 이후 REACT의 알고

[React] Custom Component CDD > Component Driven Development(CDD) 기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었습니다. 페이지가 모두 완성되었는데, 다른 페이지에 적용

[React] Custom Component ModalModal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말합니다. 시작하기 Modal 컴포넌트 구현에 필요한 정보가 자세히 적혀있습니다. 확인 후 과제를 진행하세

React가 상태 관리를 위한 라이브러리는 아닙니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있습니다.상태 : 변하는 데이터, UI에 동적으로 표현되는

[React] 상태 관리 쇼핑몰 애플리케이션인 Cmarket에서 Hooks를 이용해 상태 관리 애플리케이션을 만듭니다. Redux를 배우기 전, React Hooks를 사용한 상태 관리 입니다. >- Bare minimum requirements react-rout

번들링

초기 세팅//1 현재 디렉토리 상황에 맞게 package.json 파일을 생성한다.$ npm init -y //2 웹팩 설치하기. 실제 프로젝트에 사용하지 않기 때문에 devDependency 옵션을 설정한다.$ npm install -D webpack webpack-

리액트는 점점 복잡해지는 프론트엔드 개발의 여러 문제를 해결하기 위해서 자연스럽게 생겨나게 되었습니다. 2010년대 초중반 당시 주류였던 앵귤러는 하나의 프레임워크로서 정형화되고 체계화된 프론트엔드 개발 경험을 제공해서 많은 환영을 받았습니다. 다만, 프레임워크라는 점

React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM 객체를 활용합니다.이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에

React Hooks

코드 분할 React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리입니다. 이번에 React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점입니다. 해당 경고문은 이제 React 18 버전은 더이상 ReactDOM.render를 지원하지 않는다는 ...

useEffect hook을 이용한 로직은 반복되는 로직이 많습니다. 특히 API를 통해 데이터를 받아와 처리하는 로직은 반복적일 수밖에 없습니다. 이러한 로직을 custom hook으로 만들어 분리하고 필요한 컴포넌트마다 적용을 한다면 컴포넌트들을 좀 더 직관적으로

리액트에서 드래그앤드롭은 react-beautiful-dnd 라는 편한 라이브러리가 있지만없이도 충분히 구현하기 쉽다고 해서 없이 해보았다

리액트에서 렌더링이란 무엇일까요? 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미합니다. 사실 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React 같은 UI 라이브러리 또는 프레임워크를 사용하는 이유입니다.브라우저

React에서 의존성 배열을 다루는 것은 굉장히 중요한 부분입니다. 의존성 배열을 제대로 다루지 못한다면 React를 사용하면서 버그가 발생할 확률이 굉장히 높아집니다. 이번 시간에는 우리가 가장 흔히 접하고 사용하는 useEffect의 의존성 배열을 통해서 의존성 배

좋은 코드를 쓰는 것은 중요합니다. 아니, 나쁜 코드를 쓰지 않는 것은 중요합니다. 왜냐하면 코드는 결국 소프트웨어를 이루는 근간이기 때문입니다. 소프트웨어가 나쁜 코드로 구성되어 있으면 결국 해당 소프트웨어는 망가지고 맙니다. 망가지고 만다는 말은 더이상 기능을 확장