profile
애기 프론트 엔드 개발자
post-thumbnail

React.js - Context API

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API 기반으로 구현되어있다.프로젝트 내에서 환경설정, 사용자 정보와 같은 전역적으

5일 전
·
0개의 댓글
post-thumbnail

React.js - 리액트 라우터(React Router)

다른 주소에서 다른 화면을 보여주는 것을 라우팅이라고 한다.클라이언트 사이드에서 이루어지는 라우팅을 구현하여 SPA를 쉽게 만들어 주는 라이브러가 react-router다.설치 : npm install react-router-dom프로젝트에 라우터 적용프로젝트에 리액트

2022년 6월 3일
·
0개의 댓글
post-thumbnail

React.js - 컴포넌트 최적화

이 글은 react todo-list 프로젝트 기준으로 작성되었습니다.아래의 상황에서 컴포넌트 리랜더링이 발생한다.자신이 전달받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링 될 때forceUpdate() 함수가 실행될 때todo list

2022년 5월 25일
·
0개의 댓글
post-thumbnail

React.js - 컴포넌트 스타일링

리액트에서는 아래 4가지 스타일링 방식을 가장 많이 사용한다.일반 CSS : 가장 기본적인 방식Sass : CSS 전처리기(pre-process) 중 하나로 확장된 CSS 문법을 사용하여 CSS코드를 더욱 쉽게 작성 할 수 있게 해준다.CSS Module : 스타일을

2022년 5월 20일
·
0개의 댓글
post-thumbnail

React.js - 리액트 훅에 대해 알아보자

Hook은 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서 동작하지 않으며, class를 사용하지

2022년 5월 2일
·
1개의 댓글
post-thumbnail

React.js - 리액트에서 이벤트 처리하기

리액트도 결국에는 자바스크립트이기 때문에 이벤트를 처리하는 방식은 순수 자바스크립트와 동일하다. 먼저 이벤트를 리스닝 후 리스너를 작성하는 것이다. 이벤트 리스닝 : 특정 엘리먼트가 어떤 이벤트를 수신할지 결정하는 것이벤트 리스너 : 이벤트 리스너란 이벤트가 발생했을

2022년 4월 11일
·
0개의 댓글
post-thumbnail

React.js - 컴포넌트 생명주기(Life Cycle)

리액트 컴포넌트 생명주기(Life Cycle) 리액트의 컴포넌트는 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

2022년 4월 5일
·
0개의 댓글
post-thumbnail

React.js - state

컴포넌트에 저장하여 사용(변경)가능한 데이터를 상태(state)라고 한다.props는 부모로 부터 전달받은 데이터이며 변경이 불가능한 읽기전용 데이터인 반면, state는 캡슐화 되어있어 비공개이며 컴포넌트에 의해 제어(변경)이 가능하다.클래스 내부에서 생성자를 만든다

2022년 2월 14일
·
0개의 댓글
post-thumbnail

React.js - React란?

자바스크립트의 영역이 커지면서 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있는 시대가 왔다. 대규모 어플리케에션 중 프론트 사이드에서 돌아가는 애플리케이션 구조를 관리하기 위해 많은 프레임 워크들이 나왔다.이 프레임워크들은 주로 MVC, MVVM, MVW 아키택

2022년 1월 11일
·
0개의 댓글