React

프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리선언형리액트는 한 페이지를 보여주기 위해 HTML/ CSS/ JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다 명시적이적이라는 것은 코드를 자세히

React에서는 여러가지 HTML 엘리먼트들을 표시할 때 map() 함수를 이용하는데, 이때 key JSX 속성을 넣지 않는다면 리스트의 각 요소에는 key를 넣어야 된다는 경고 가 표시된다.어떤 경고? key를 설정하지 않았을 때 다음과 같은 경고를 볼 수 있다...

🤔 SPA란? 1. 등장배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해서 매번 HTML 파일로 된 페이지의 전체를 불러와야만 했다. 위와 같은 예시 그림처럼 동일한 페이지 전환을 보여주고 있다. 전통적

wireframe과 Mockup wireframe 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대 디자인에 들어가기 전 단계, 선을 이용해 윤곽선을 잡는 것 Mockup 데모 시연, 평가를 위한 최소한의 기능만을 담은 모형 데스크톱, 스마트폰의 프레임을 덧씌워 직관

: 외부로부터 전달받은 값: 내부에서 변화하는 값: 살면서 변할 수 있는 값: 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값🔹 Props의 특징컴포넌트의 속성(property)을 의미부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값객체 형태Props는 읽기 전

🔹 React에서의 이벤트 처리 방식은 DOM 이벤트 처리 방식과 유사하다. (몇 가지의 문법 차이가 있음)React에서 이벤트는 카멜 케이스 사용카멜 표기법(Camal Case): 식별자 표기 시, 여러 단어가 이어지면 첫 단어 시작만 소문자로 표시하고 각 단어의

Intro... > React의 개발 방식 중 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다. 프로토타입에서 컴포넌트를 찾아내어 각 컴포넌트를 만들어 가면서 페이지를 만들어 나간다. 즉 상향식으로 프로토타입 앱을 만든다는 것이다. 페이지를 만들

Side Effect 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 컴포넌트 내에서 fetch를 사용해 API를 가지고 오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effec

❤️‍🔥 CDD | Component Driven Development

기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공기존 DOM을 만드는 방식인 CSS, SCSS 파일을 밖에 두고, 태그나 id, class 이름을 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정

omponent Explorer의UI 개발 도구, UI 개발로 Component Driven Development를 하기 위한 도구이다.. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나,

상태: UI에 동적으로 표현될 데이터, 변하는 데이터Side Effect: 함수 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청, API 호출Side Effect를 최대한 배제하여 컴포넌트를 만들자!로컬 | 특정 컴포넌트 안에서만 관리되는 상태컴포넌

장바구니 담기 버튼을 이용해 장바구니에 해당 상품이 추가장바구니 내 삭제 버튼을 이용해 장바구니의 상품이 제거장바구니 내에서 각 아이템 개수를 변경장바구니의 상품 개수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 개수가 업데이트

❤️‍🔥 Props Drilling 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 데이터를 전달하는 현상 아래의 그림처럼 컴포넌트 A의 state를 컴포넌트

다음과 같은 구조를 가진 React 애플리케이션이 있다고 가정했을 때, 컴포넌트 3, 컴포넌트 6에만 사용되는 상태가 있다. 이 상태는 어느 컴퓨넌트에 위치시켜야 할까? 답은 React 데이터 흐름은 단방향으로 흐르기 때문에 최상위 컴포넌트에 위치시키는 것이 적절하다.

가상의 DOM 객체실제 DOM의 사본 같은 개념React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다.Virtual DOM은 Real DOM의 가벼운 사본과 같습니다.Virtual

📌 React Diffing Algorithm React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었습니다. 즉 하나의 트

Hook은 함수 컴포넌트에서 사용하는 메소드입니다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었습니다. 많은 React 개발자들이 이 클래스 컴포넌트를 사용하여 React 앱을 개발해왔습니다. React의 클래스 컴포넌트는 조금 생소한 개념일 수 있습니다

컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.그림 너무 많은 렌더링은 앱에 안 좋은 성능을 미치는 극단적인 예렌더링 최적화를 위한 Hook도

메모이제이션 기법을 이용한 Hook useMemo: 값의 재사용을 위해 사용하는 HookuseCallback: 함수의 재사용을 위해 사용하는 Hook현재 이 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태이다. 이 add 함수는 props로

📌 Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀

React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리이다. 이번에 React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다 것이다.그림 React 18로 업데이

한 애플리케이션 당 하나의 Store를 가진다.Store는 현재의 앱 상태와 리듀서를 가지며, 추가적으로 몇 가지의 내장 함수들이 있다.변화를 일으키는 함수, 기존 상태와 액션 두 가지 파라미터를 받는다.현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 리턴한다.

📌 Store src/store/index.js 📌 Function Component src/components/Counter.js 📌 Class Component src/components/Counter.js

리덕스의 상태 데이터가 많아질수록 객체 내부의 데이터의 양이 방대해진다. 그럴 때마다 액션 로직 또한 해당 객체의 양식을 그대로 리턴해야 되기 때문에 리덕스 코드가 길어지고, 파일이 무거워질 수밖에 없다. 이런 경우 어떻게 할까? 실수로 중첩된 데이터 등을 바꿀 수 없

관련된 상태끼리 다루기 위해서 여러 slice를 다루는 방법을 알아보자. 모든 slice는 각 slice를 구분하기 위해 name이 필요하다.slice를 생성해 주기 위해서 아래와 같은 형식을 가진다.초기값으로는 다음과 같이 지정해 줄 수도 있고따로 객체를 선언한 변수

Side Effect란 애플리케이션에서 일어나는 다른 모든 것을 의미한다. 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우나, React 컴포넌트가 화면 렌더링 이후 비동기 처리되어야 하는 부수적인 효과이다.Side Effect가 일어났다고 하는 경우는 다음과

🌱 Intro > 일반적으로 데이터는 Props을 통해 컴포넌트에 전달 되는데 항상 문제가 되는 건 state를 여러 컴포넌트를 통해 전달하는 경우이다. 즉 기본적으로는 Props을 활용해 다른 컴포넌트에 데이터를 전달한다. 상위 컴포넌트의 데이터를 하위 컴포넌트가