React

JSX란 JavaScript를 확장한 문법이다.UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용된다.다음과 같은 HTML 코드는 아래와 같은 버튼을 생성한다.하지만 이 구문이 JSX 안에서 쓰인다면 다음과 같은 오류를 보인다.이는 JSX에서는 속성의 값

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/리엑트는 다음과 같은 라이프 사이클을 갖고 있다.이 중 shouldComponentUpdate, getDerivedStateFromProps, get

React로 웹 애플리케이션 개발도중 React 컴포넌트가 아닌 DOM 노드 혹은 React 엘리먼트에 접근해야 할 경우가 있다.Ref는 render메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.React에서 부모와 자식 컴포넌트간에 상

기존 React에서 Hook은 16.8부터 추가되었다.Hook은 기존의 Class 바탕의 코드(Class Component)를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 도와준다.선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 컴포넌트

이번 프로젝트를 진행하며 style-components를 활용하여 css를 구성해보자는 이야기가 나왔다.그렇다면 style-components는 무엇일까?styled-componets 공식문서styled-components 는 CSS를 component에 사용 할 수

7주간의 프로젝트를 진행하며 그간 공부해온 React Hook과 React-Redux Toolkit을 활용해보았다. 비교적 짧은 시간동안 (약 4주의 개발 시간, 이외는 기획 및 발표 준비) 만족스러운 결과물이 나온 만큼, 이후에도 리펙토링과 버그 픽스를 통해 보다 견

저번에 이어, React와 Redux의 lifescycle을 공부하고자 한다. 이번에는 React Hooks에 대해 알고자하는데, 앞서 Class Component의 lifecycle을 알아본 봐 있고, 이는 크게 hooks에서도 다르지 않다. 우선 정의는 다음과

저번에 이어 리액트 디자인 패턴을 공부하고자 한다.이를 통해 다음 프로젝트에서 적용 될 패턴을 선별하기도 할 것 이다.https://bradfrost.com/blog/post/atomic-web-design/디자인 요소들을 나누어 파악하고, 이 요소들이 조합되

Next.js 는 React 라이브러리의 프레임워크이다공식 문서에서는 하이브리드 정적 및 서버 렌더링, TypeScript 지원, 스마트 번들링 등 개발하는데 필요한 많은 기능을 제공한다 한다처음 Next.js 마주치는 입장으로써, 이미 React도 나름 잘 되있는게

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념다음과 같은 코드는 Virtual DOM에서 아래와 같이 표현 될 수 있다.DOM은 브라우저들에 의해, Re