형제 컴포넌트 간의 상태 전달을 Context API를 통해 실현해보자.내가 원하는 작업은 형제 컴포넌트(quiz, result) 간의 데이터 전송이고, 검색해 본 결과 전역상태관리를 할 수 있게 해주는 context api를 사용해야 한다는 것을 알게 되었다.전역상태

데이터로 받아온 문자열에 줄바꿈을 적용해 원하는 형태로 만들어보자.API를 통해 받아오는 데이터를 수정하는 상황.원하는 구조실제 렌더링된 구조정규식을 활용한 replace 메소드백엔드에게 띄어쓰기 할 부분마다 < br >를 넣어달라고 부탁하고, repalce메소드

비교하기 서버와 통신하여 받아온 데이터를 콘솔에 보여주기 문제점: 빈배열이 나온다. 아마도 비동기방식때문에 서버를 기다리지 않고, 콘솔을 먼저 찍어 보여주는 듯하다. 원래코드 useEffect(() => { axios.get(${QUESTIONAPI}) .t

useState 함수형 컴포넌트는 타입스크립트없이 컴포넌트를 작성하는 것과 별 차이가 없다. hooks는 class 컴포넌트와 달리, useState를 사용할 때 Generics를 사용하지 않아도 타입스크립트가 타입을 유추하기 때문에 생략해도 상관없다. useStat

리액트 + 타입스크립트 기본세팅방법에 대해 정리해보자.react + ts + prttier에 eslint 설정, airbnb 규칙 적용(tslint대신 eslint설치)npm i -D eslint eslint-config-airbnb eslint-config-prett

리액트 훅스 두번째 시간, useReducer, useMemo, useCallback, useRef에 대해 알아보자.useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 hook이다. 리듀서

함수형 컴포넌트에서 react hooks를 사용하여 상태 관리를 해보자. React Hooks란? react Hook를 한마디로 요약하면, 클래스형 컴포넌트를 사용하지않고도 함수형 컴포넌트에서도 state 를 운용할 수 있는 기능을 말한다. 기존의 함수형 컴포넌트는

웹사이트에서 많이 사용되고 있는 'tabs menu'를 리액트와 뷰를 이용하여 만들어보자.

state를 효율적으로 관리해주는 redux, mobx. 본격적으로 배우기 전에 어떤 개념인지 알아보는 시간을 가져보자.React는 기본적으로 component마다 상태관리를 한다.프로젝트의 규모가 커지거나 요구사항이 점점 늘어남에 따라서 component끼리 상태 교

많이 들어봤지만 한번도 사용해본 적 없는 componentDidUpdate를 이번 프로젝트에서 드디어 사용해보았다. 정리해보자!이전 상태와 현재 상태를 비교하여 구성 요소 업데이트를 한다.componentDidUpdate()후에 호출 componentDidMount()

'동적라우팅'을 이용해서 상품리스트페이지에서 해당 상품을 클릭하여 상세페이지로 넘어가보자. 동적라우팅(Dynamic Routing)이란? 동적라우팅이란 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 기능을 말한다. 'Query parameters

아이템이 많은 쇼핑몰의 경우 전체상품을 한꺼번에 보여줄 수 없다. 이때 일정단위로 끊어서 아이템을 보여주는 기능인 pagenation에 대해 알아보자. Pagination(paging) 백엔드에서 보내는 데이터양이 많다면, 그 데이터를 한 화면에 전부 보여줄 수 없을

'styled components'는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리 중 하나이다. 그러니까 사용해보고 알아보자. styled component 기존에 따로 css파일을 만들어주는 것과 달리 JS 안에서 CSS를

nav는 대부분의 페이지에 들어가지만, 특정페이지에는 필요하지 않다. route에 이 부분을 어떻게 반영할 수 있는지 알아보자.대부분 페이지에 nav component가 필요했지만 로그인, 회원가입페이지같은 경우에는 필요없었다. 필요한 컴포넌트에만 nav를 넣어주는 방

대부분의 사이트에서 필수적인 요소인 '로그인'과 '회원가입'. 오늘의 주제를 통해 프론트와 백앤드의 통신을 이해해보도록 하자. access token 액세스 토큰은 성공적으로 로그인 했음을 증명하는 암호문 형태의 일종의 '입장권'이다. 프론트와 백은 서로 통신하기 위

리액트 component가 생성(mounting)되고, 수정(updating)되고, 소멸(unmounting)되는 과정들에 대해 알아보자.Life Cycle이란 컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다.컴퍼넌트가 브라우저상에 나타나는 것을 말한다.해

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있다는 공통점이 있다. 하지만, props는 컴포넌트에 전달된다는 점과 status는 컴포넌트 안에서 관리한다는 점이 다르다.부모 컴포넌트가 자식 컴포넌트에게 주는 값을 말한다. 자식 컴포넌트는 props를 받아오

한 웹페이지 안에서 여러 개의 페이지를 보여주는 'routing'기능에 대해서 알아보자.라우팅이란 쉽게말해, 한 웹페이지 내에서 다른 경로에 따라 다른 화면을 보여주는 것을 말한다. 아쉽게도 리액트라이브러리 자체에는 이런 기능이 내장되어있지 않기때문에 'third-pa

기존의 html문법과 jsx문법 차이점을 유의하자.아래는 컴퍼넌트를 만드는데 필요한 코드이다.App이라는 클래스를 만들고, 리액트에 컴퍼넌트라는 리액트가 가지고 있는 클래스를 상속해서 새로운 클래스를 만든다. 그 클래스는 render라는 메소드를 가지고 있는데, 이때

'리액트'는 가장 인기있는 프론트엔드의 꽃인 리액트의 개념에 대해 알아보자. (리액트 무섭다...)리액트는 2011년 페이스북에 의해 만들어진 현재 가장 인기있는 자바스크립트기반 라이브러리이다. 기존의 방식으로는 복잡한 동적 웹페이지를 구현하는데 어려움이 있었다. 예를