REACT

이 카테고리에서는 리액트 공부 관련 기록들을 남겨놓으려한다. 리액트를 다루는 기술 이라는 책을 중심으로 하여 정리할 것이다.리액트에 관하여서는 전체적인 개념도 알고 프로젝트도 몇몇 만들어봤지만아직 깊이있게 다루지 못하여 이 책을 중심으로 하지만 책에서도 이해가 가지않고

리액트는 페이스북에서 만든 자바스크립트 라이브러리 중 하나로 UI(사용자 인터페이스)를 만들기위해 사용됩니다. 현재 리액트는 프론트엔드 개발자에게 가장 많이 사랑받고 있는 라이브러리 중 하나이다. 많은 기업에서도 리액트를 다룰 줄 아는 사람들을 요구하고 있으며 프

이번에는 npm create(init) react-app을 하였을 때 만들어지는 여러 리소스중 제일 중요한 파일인 index.js에 담겨져 있는 코드들을 분석하고자 한다.

JSX는 자바스크립트 확장 문법이며 코드가 번들링되는 과정에서 바벨이 사용되어 일반 자바스크립트 형태의 문법으로 변환된다.보기 쉽고 익숙하다.기존 자바스크립트 코드와 비교해봤을 때 가독성도 좋고 기존 HTML 코드 작성하는 것과 비슷하여 코드 작성에도 편리한다.컴포넌트

🔍 컴포넌트 > 컴포넌트는 하나 이상의 리액트 요소 집합을 반환하는 함수이다. 👓 특징 컴포넌트는 재사용성이 높아 UI구성에 효율적이다. 이는 많고 복잡하게 이루어진 리액트 요소들을 재사용하여 가독성있고 편리하게 코드를 작성할 수 있게 해준다. 또한 같은 컴

이번 포스팅에서는 리액트에서 중요한 개념이자 거의 필수적으로 쓰이는 props와 state를 알아보겠다.props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할

state는 컴포넌트내에서 어떠한 값을 동적으로 갱신해주기 위하여 사용한다.즉, state는 동적으로 갱신되는 값이다. 앞서 보았듯이 props는 컴포넌트 내부에서 값을 변경할 수 없다.따라서 props 값을 변경해주기 위한 방법으로 state가 있다.꼭 props 뿐

Event Handler : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수이번에는 리액트에서 이벤트 핸들링하는 것을 알아보겠다.우선 기존 HTML에서 DOM요소에 이벤트 핸들링하는 것을 살펴본 뒤리액트에서 이벤

키는 DOM 요소를 확인하기 위해 사용하는 유일한 것이다.Virtual DOM을 비교하는 과정에서 key가 있다면 더욱 빠르게 알아낼 수 있다.(https://ko.reactjs.org/docs/reconciliation.html키가 이전과 같으면 React는

생명주기 메서드란 컴포넌트가 화면에서 나타낼부터 없어질 때까지의 생명주기를 표현한 메서드들이다.클래스 컴포넌트에서만 사용할 수 있으며 함수형 컴포넌트에서는 이와 비슷하게 구현할 수 있는 Hook이 존재한다.컴포넌트가 마운트(처음 렌더링될 때)될 때, 업데이트될 때(pr

Hook이란? > 함수형 컴포넌트에서 클래스의 라이프사이클 메서드 기능과 state 관리를 할 수 있게 해주는 기능이다. Hook을 쓰는 이유? 라이프사이클 메서드를 사용하기 위하여 클래스 컴포넌트로 바꿀 필요 없다. 클래스형 컴포넌트의 라이프사이클 메서드에서 중복

HOCs(Higher Order Components)render props

주소에 따라 그에 맞는 컴포넌트를 로딩시간을 단축하여 보여줄 수 있는 리액트 라우팅 라이브러리이다.라우팅 : 다른 주소에 다른 화면을 보여 주는 것기존에는 HTML문서나 템플릿 엔진을 사용하여 경로에 맞는 문서를 할당해주었다. 새로운 경로에 들어갈 때마다 서버에서 HT

리액트 프로젝트를 만들면서 여러 컴포넌트를 다루게 된다.컴포넌트는 여러 가지 상황에 따라 리렌더링이 발생할 수 있는데 이는 가끔 불필요한 리렌더링을 발생시키는 경우가 있다.리렌더링이 발생하는 경우는 언제인가?리렌더링이 발생하는 경우는 크게 3가지 경우가 있다.1\. p

이전 포스팅에서 react router에서 주로 사용되는 컴포넌트 및 기술들을 알아보았다.주로 사용하는 것뿐만 아니라 react router로 여러 가지 기능을 구현할 때 필요한 훅이나 컴포넌트들이 있다.본 포스팅에서는 부가적인 훅과 컴포넌트에 대해 알아보겠다.

컴포넌트가 중첩되있을 경우 기존과 같이 props를 통해 상태 데이터를 전달할 때에 여러번 거쳐서 전달할 필요없이 전역적으로 상태 데이터를 사용하게 해주는 API이다.기존과 같은 경우에는 컴포넌트가 여러개 중첩되있을 경우 최상위 컴포넌트에서 상태를 입력한다.해당 sta

리액트 상태 관리 라이브러리컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 관리전역 상태를 관리할 때 효과적Context API보다 상태를 더욱 체계적으로 관리(프로젝트가 클 경우에 리덕스를 사용하는 편이 더 좋다.)미들웨어 기능을 제공하여 비동기 작업을

블로그 프로젝트를 진행하다보니 Text-editor library가 필요하여 Quill 과 ReactQuill Library를 사용해보았다.Quill과 ReactQuill은 둘 다 text를 편집할 수 있게 해주는 library이다.블로그 포스팅을 작성할 때 위처럼 내

평소에 공부는 해놨지만 큰 프로젝트를 하지않아 렌더링 최적화에 크게 신경쓰지 않았다. 지금 하는 블로그 프로젝트도 다른 대형 프로젝트에 비하면 크게 렌더링에 악영향을 주진 않지만 state가 복잡해지고 Component수도 많아진만큼 최적화를 해주는 것은 앞으로의 좋은

리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 하지만 문득 무지성으로 사용하고 있는건 아닌가 라는 생각이 들어 오늘은 cra에 대해 알아보고자 한다. CRA(create-react-app) 지원 브라우저 및 특징 지원

redux를 공부하다 redux를 더 쉽게 사용할 수 있는 방법인 RTK에 대해 알아보려한다RTK은 redux 공식문서에 추천하는 기능이다.RTK는 redux의 핵심적인 부분과 redux app을 만들 때에 필수적인 요소를 담고 있다.또한 redux를 사용하는데에 더

UI&Component Design 요즘 블로그 프로젝트를 진행하고 있다. 프로젝트를 진행하며 리팩토링을 하다보니 UI를 처음부터 디자인 하는 방법을 내 나름대로 정해놓으면 나중에 리팩토링할 일이 줄어들겠다는 생각을 하였다. 그래서 UI Component를 Desig

타입스크립트 , 리액트 , 리덕스를 같이 사용하는 방법을 알아보자. 탬플릿 사용하기 일일히 타입스크립트 , 리액트 , 리덕스 셋팅을 할 필요없이 Create a React Redux App 템플릿을 사용하면 셋팅이 완료된 템플릿 상태로 프로젝트를 시작할 수 있다.

블로그 프로젝트를 version2로 업그레이드할 예정이어서 프론트 프로젝트를 처음부터 다시 셋팅할 예정이다. CRA는 간단한 명령어로 필요에 따른 프로젝트 셋팅을 제공해주지만 때에 따라 필요하지 않은 모듈들도 포함되어있다. > Creat-React-App(CRA)

프론트엔드 개발을 할 때 vanilla.js를 사용하여 개발하면 되는데 왜 굳이 react라는 프레임워크를 설치하여 사용할까?react를 사용하는 이유는 다음과 같다.컴포넌트 사용라우팅statevirtual dom반복해서 사용하는 UI를 컴포넌트화하여 효율적으로 관리할

DOM과 Virtual DOM 리액트에서는 virtual DOM(가상 돔)이라는 것을 사용한다. 그렇다면 그냥 DOM을 사용하지 않고 왜 따로 가상 돔을 만들어서 사용하는 것인것일까? 그리고 그렇게 가상돔을 사용하면 어떠한 장점들이 있을까? DOM과 Virtual

클로저 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용합니다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 컴포넌트는 클로저를 활용하는가? 리액트의 컴포넌트는 내부적으로 클로저를

리액트에서 state에서는 불변성을 유지해야한다는 말은 많이 들어보셨을 것입니다.그렇다면 불변성이라는 성질은 무슨 말이고 이를 유지한다는 것은 어떤 의미일까?불변성이란 불(아닐 불) 변(변할 변)으로써 변하지 않는 성질을 말합니다.그러면 무엇이 변하지 않으면 될까요?할

리액트는 순수 함수를 이용하여 UI를 렌더링합니다. 즉 , 컴포넌트를 순수 함수로 구성하려합니다. 그렇다면 순수 함수는 무엇이고 왜 컴포넌트를 순수 함수로 구성하려하는 것일까요? 순수 함수 순수 함수는 동일한 인수를 전달하면 항상 동일한 결과를 반환하는 함수입니다

상태 관리 라이브러리를 사용하는 이유

미들웨어와 이를 활용한 리듀서미들웨어(middleware)란 무엇일까요?두 개의 개체 사이에서 원만히 통신할 수 있도록 돕는 역할을 합니다.리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다.즉, 리덕스 미들웨어는

사내 프로젝트 중 로그인을 구현하고 있다.로그인 유지 기능이 있어 구현을 해야하는데 조건은 다음과 같이 정의할 수 있다.체크시, 브라우저창을 닫거나 탭을 닫아도 다시 들어올 때에도 로그인이 유지되어야함.체크를 안할시, 브라우저창을 닫거나 탭을 닫으면 다시 들어왔을 때

클라이언트 설정 코드위와 같이 클라이언트쪽에서 axios 설정이 되어있어도 서버쪽에서 모든 도메인에 대해 cors를 허용해준다고 하여도 Cors오류가 발생하는 이슈가 발생했다.Credentials 이란 쿠키, Authorization 인증 헤더, TLS client c

하나의 페이지가 여러 컴포넌트로 나누어져있을 때, 여러 컴포넌트 중 특정 컴포넌트를 참조해야하는 경우가 있다면 어떻게 해야할까?요구사항은 다음과 같다.특정 컴포넌트들이 특정 영역에서 position이 sticky 방식으로 움직이다가 특정 영역에 들어서면 sticky가

리액트를 더 자세히 이해하고 싶어 리액트와 비슷하게 SPA를 만들어보려고 하고 있습니다.만들고자 하니 무엇부터 시작해야할지 감이 안 잡혔는데요.우선 CRA를 통해 생성한 리액트를 프로젝트를 살펴보면서 프로젝트가 시작되는 ENTRY POINT부터 찾아봤어요!SPA 동작방

리액트를 사용하면서 useEffect는 거의 필수적으로 사용되고 비동기 함수를 함께 사용하게 되는데요. useEffect와 비동기 함수(async) 관계에 대해서 살펴보려고 합니다. useEffect 콜백함수를 async 함수로 사용하면 안되는 이유? useE

종혁님께서 주최하시는 11월 원티드 프리온보딩 사전과제(TO DO App)를 리팩토링하고 있습니다.모든 코드는 다음에서 확인하실 수 있어요.https://github.com/BrightJun96/wanted-pre-onboarding-challenge-fe-2

전체 코드는 다음 레포지터리에서 구경할 수 있습니다.https://github.com/BrightJun96/wanted-pre-onboarding-challenge-fe-27종혁님께서 진행하시는 11월 원티드 프리온보딩 사전과제(TO DO APP)를 진행했어요