React

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리다.React는 javascript를 이용하여 만들어진 프론트엔드 라이브러리이며, 페이스북에서 유지보수하여 계속해서 새로운 기능들이 업데이트 되어지고 있다.또한 현재 많은 기업에서 사용되는 만큼 거대한 생태계를 자랑

npx create-react-app '프로젝트 이름'먼저 Create-React-App을 이용하여 리액트 프로젝트를 생성해주도록 하자.그리고 해당 프로젝트의 디렉토리로 가서 실행해보자.npm startHello World!파이어베이스 홈페이지에서 새 프로젝트 생성 ㄱ

지난 번에 알아보았던 리액트의 강점 중 하나는 컴포넌트 기반의 개발이었다.리액트에선 속성만 바뀐 채 여러번 등장하는 컴포넌트를 다시 재사용하기 편하다.그럼 컴포넌트를 이용해서 반복되는 컴포넌트를 표현해보자.근데 이런식으로 일일이 컴포넌트 추가하고 props지정해주고 하

기존의 리액트는 컴포넌트를 생성할 때 클래스를 이용했다.다만 클래스형 컴포넌트는 꽤나 높은 자바스크립트 이해도를 요구하여 진입 장벽이 높았으며코드를 길어지기 때문에 코드의 간소화도 힘들었다.이런 단점을 인지한 페이스북 리액트 팀에서는 이를 개선하고자 React.js v

리액트에서 데이터를 UI에 반영하기 위해서는 데이터를 상태값으로 저장하고 유지해야 한다. 이 후 상태값이 변화하면 리액트는 이를 인식하고 UI를 그에 맞게 리렌더링한다. 리액트 16.8

Side Effect Side Effect. 부작용, 부수효과. 이름만 들어서는 약간 부정적인 의미를 가진 것 같기도 하다. 하지만 함수 컴포넌트에서 Side Effect는 단순히 함수 실행시 함수 외부의 상태를 변경하는 연산을 뜻하며, 렌더링외의 함수 외부 환경에

useRef는 current 프로터피로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. &nbsp 반환된 객체는 컴포넌트의 전 생애주기를 통틀어 유지될 것입니다. &nbsp 본질적으로 useRef는 current 프로퍼티에 변경 가능한 값을 담고있는 상자와 같습니다. &nbsp 리액트 공식문서 useRef? 리액트는...

!!! 본 포스트는 react-router v6에 대한 포스팅입니다.라우팅이란 각기 다른 경로(url)에 따라 다른 화면(View)를 보여주는 것이다.다만 리액트는 전반적인 프론트엔드에 관련된 기능을 제공하는 프레임워크(Angular.js 등...)와 달리 SPA를 위

노가다의 서막 airpnp 프로젝트 진행중 Nav.js 검색바와 호스트 상세 페이지에 사용되어질 Datepicker를 제작할 필요가 있었다. 물론 처음부터 다 만들 수도 있었지만 2주라는 짧은 시간 내에 지도 API와 등록페이지까지 다 만들기는 시간이 부족하다는 판단

airpnp 프로젝트를 진행하면서 호스트 리스트 페이지 및 호스트 상세 페이지에서 맵을 사용할 필요가 있었다. 과거 바닐라JS를 사용해서 프로젝트를 진행할 때 네이버 지도를 사용한 경험이 있어서 다른 지도 API보다 우선적으로 네이버 지도를 사용하게 되었다. 초기

React에서의 전역 상태관리는 문자 그대로 전역적으로 상태값을 관리하는 것을 뜻함React.js의 특징중 하나가 단방향 데이터 흐름(One-way Data Flow)을 가지고 있다는 것이다.그 방향은 하향식(Top-down)으로 고정되어 있는데, 이 때문에 상태값을

Actionstate를 바꾸는 방식액션 객체를 가지고 있고, 반드시 type 필드가 있어야 한다.DispatchAction을 발생시키는 매개체action 객체를 파라미터로 받음Reducer변화를 일으키는 함수로 Action의 결과로 state를 어떤 식으로 바꿀지 구체

뷰포트에 따라 성능향상을 위해 리사이징 및 레이지로딩을 구현할 필요가 있는데, Next에서는 이를 기본적으로 지원해 준다.Next의 <Image />를 이용하여 다음과 같은 효과를 낼 수 있다.향상된 성능 : 디바이스 사이즈에 맞춰 최적화된 이미지 제공시각적 안전