React

JS 기반 프레임 워크는 매우 다양한데 이 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처, MVW(Model-View-Whatever) 아키텍처를 사용한다.위와 같은 여러 구조가

리액트의 특징에 대해 알아보기 전에 DOM에 대해 알아보고자 한다.DOM은 Document Object Model의 약어이며, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.웹 브라우저는 DOM을 할용하여 객체에 JS와 CSS를 적용한다. 또한 D

JSX란? JSX는 JS의 확장 문법이다. (XML과 매우 비슷하게 생겼음) JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환된다. 어떻게 변환되는지 확인해보자 위와 같은 코드는 어떻

요즘은 함수 선언 방식보다는 화살표 함수를 사용하는 방식이 많이 보인다.화살표 함수는 함수 선언 방식을 완전히 대체할 수 있는 것인지 둘은 완전 같은 역할을 한다고 볼 수 있을지 알아보자ES6 문법에서 함수를 표현하는 새로운 방식주로 함수를 파라미터로 전달할 때 유용값

이제 본격적으로 컴포넌트에 대해 공부할 것이다. 먼저 컴포넌트를 선언하는 방식은 두 가지로 나뉜다. 함수 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트 사실상 둘의 역할은 같지만* 클래스형 컴포넌트는 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과

이전 포스트에서 설명했듯 props는 부모 컴포넌트에서 바꿔줘야 하고, 자식 컴포넌트에서는 전달받은 값을 바꿀 수 없다.그렇다면 컴포넌트 내부에서 직접 값을 바꾸기 위해서는 어떻게 해야 할까?👉 state를 사용하면 된다state는 컴포넌트 내부에서 바뀔 수 있는 값

리액트에서 이벤트를 다루는 방법에 대해 알아보려고 한다.이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것HTML을 사용해봤다면 이벤트를 다루는 것도 익숙할 것이다. HTML에서는 위 예시처럼 이벤트를 실행하면 " " 사이에 있는 JS를 실행하도록 코드

서론 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 많은 사람들이 아래와 같은 구조가 익숙할 것이다. 이렇게 특정 DOM 요소에 어떤 작업을 해야 할 때 id를 달면 CSS에서 특정 id에 스타일을 적용하거나 JS에서 해당 id를 가진 요소를 찾아

위 코드에서 문법상으로 onClick 함수는 의 형식으로 작성해도 되지만, 컴포넌트가 처음 렌더링될 때 this.scrollBox 값이 undefined 이므로 오류가 발생한다.따라서 화살표 함수 문법을 사용하여 새로운 함수를 만들고 그 내부에서 메서드를 실행하면 이미

파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다arr.map(callback, \[thisArg])callback은 새로운 배열의 요소를 생성하는 함수로, 파라미터는 세 가지가 있다.currentVa

모든 리액트 컴포넌트에는 라이플사이클(수명 주기)이 존재라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능함수형 컴포넌트에서는 Hooks을 사용해 비슷한 작업을 처리할 수 있다종류는 총 9가지Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드

Hooks는 여러 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다 useState 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌 useState를 여러 번 사용할 때 하나의 useStat

리액트 컴포넌트 스타일링 방식의 종류를 알아보자

VS Code에서 리액트 프로젝트를 진행할 때 사소하지만 알면 유용한 꿀팁을 적어보려 한다

immer에 대해 알아보자

이번에는 리액트에서 컴포넌트의 성능을 최적화하는 방법에 대해 알아보려고 한다