React

state란 상태를 가르킵니다.컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값state란 화면에 보여주는 컴포넌트의 상태를 가지고 있는 객체 입니다.state는 컴포넌트 내에서 정의되며, setState를 사용하여 상태값을 변경할 수 있습니다.class형 컴포넌트를 구

React 배열 rendering > 배열을 생성하고 배열을 렌더링 하는 방법을 알아봅시다. > > useRef를 사용해 Component 내부에 변수 생성 > 컴포넌트 안에 변수를 생성하면 다음 렌더링 될 때마다 변수는 초기화 되는데 이 때, useState

React useRef를 사용한 특정 DOM 선택 > JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리엑트

React 을 만들고 input의 value값을 받아와 출력해주는 것은 만들어 보려고 합니다. useState를 사용하여 input 상태 관리 (input이 1개) > > jsx import React from 'react'; // import InputSa

React useState 사용한 동적 상태 > 컴포넌트에서 보여줘야하는 내용이 사용자 인터렉션에 따라 바뀌어야 할때, useState를 사용할 수 있습니다. 아래의 코드를 사용하여 버튼을 누를때마다 숫자가 증가하려면 어떻게 해야될까요? > > 해당 코드를 us

React React 선택 이유? > 프로젝트를 진행하면서 JS에서 직접 DOM으로만 개발했을때 너무 복잡했었지만, 특정 부분을 컴포넌트로 만들어 사용할 수 있다는 점과 오로지 view를 위한 라이브러리로서 많은 매력을 느끼게 되어 리엑트를 선택했다. React란?

Component > 컴포넌트란 재사용 가능한 UI단위를 말합니다. 만약 자신이 회원가입 페이지의 로그인 창 등 여러가지를 만들었는데, 정보 수정 하는 페이지를 추가하게 되어 비밀번호 input을 만들어야 한다면 반복되는 부분을 하나의 컴포넌트로 만들어 똑같은 디자

React - JSX JSX > 아래의 코드는 js도 아니고, html도 아닙니다. 아래의 문법은 JSX라고 불리는 javaScript의 확장 버전이며 syntqax extension for JavaScript라고 합니다. 콘솔로 아래의 코드를 찍어보면 오류가 납니

React - Router SPA (single page Apllcation - 페이지가 한개) > 이전에 우리가 계속 사용했던 것은 페이지 수만큼 html 파일이 존재했지만, 리액트에서 사용할 프로젝트에서는 html 파일의 개수는 1개이다. SPA인데 여러개의 페

React Props > Props는 컴포넌트의 속성값입니다. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다. 부모 컴포넌트로부터 자식 컴포넌트에게 state Props 객체 > props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체

React mock data > mock은 가짜의 라는 뜻을 가지고 있스빈다. 즉, mock data는 가짜 데이터, 샘플 데이터라고 생각하면 됩니다. 실제 API 에서 받아온 데이터가 아니라 프론트엔드 개발자가 필요에 의해 직접 만들어본 데이터를 말합니다. mo

React > 백엔드로부터 데이터를 받아오려면 API를 호출 후 응답을 받아옵니다. 자바스크립트 Wep AIP fetch()함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 이번 블로그에서는 fetch()함수에 다루도록 하겠습니다. fetch() 함수 -

백엔드에서 가지고 있는 데이터는 많아서 그 데이터를 한번에 보여주기 힘든 경우에 데이터를 일정 길이로 끊어서 전달해야합니다. 이미 많은 웹사이트에서 사용하고 있는 것이 pagination 입니다. 프론트엔드에서는 현재의 위치(Offset)과 추가로 보여주어야하는 (Li

배열을 생성하고 배열을 렌더링 하는 방법을 알아봅시다.

React useRef를 통한 컴포넌트 안의 변수 생성 > 컴포넌트가 리렌더링 될 때마다 기억할 수 있는 값을 관리하고 싶을 때, useRef를 사용할 수 있습니다. > 아래 예제를 통해서 어떻게 사용하는지 알아봅시다. >

React useEffect > useEffect를 사용하여 마운트, 언마운트 업데이트 시의 작업을 설정해 보도록 하겠습니다. 이전 블로그에서 작성했던 코드에서 추가로 작성하여 useEffect를 사용하여 어떻게 동작하는지 확인해봅시다. useEffect(() =>

React useMemo > useMemo는 특정값이 바뀌었을때만 특정 함수를 실행해서 연산하고 바뀌지 않았다면 리렌더링할때 이전의 만들었던 값을 재사용할 수 있게 해준다. > 아래 예제를 통해서 useMemo를 사용해봅시다. 이전 블로그에서 사용했던 App.j

React useReducer 사용해보기 > 언제 useState를 사용하고, 언제 useReducer를 사용할까요? 여기에 답은 없습니다. 만약 컴포넌트에서 관리한는 값이 한개이고 간단하면 useState가 편합니다. 하지만 관리하는 값이 여러개이고 복잡해진다면

React context API를 사용하여 전역값 관리하기 > 우리는 지금까지 자식의 자식의 자식의 컴포넌트에서 부모 컴포넌트에 있는 값을 사용하려면 props의 props의 props로 넘겨받아 사용해왔습니다. 하지만 contextAPI를 사용하여 여러번 prop

React Styled Components > Styled Componets는 리액트 라이브러리 중 가장 인기있는 라이브러리 중 하나입니다. 앞으로는 스타일드 컴포넌트를 사용하기 위해서 기초를 다져보도록 합시다. 1. Styled Components 설치 > 2

React Styled Components 설치 및 pakage.json에 등록 우선 CRA를 생성하고, styled-components를 설치해줍니다. > npm install --save styled-components 그리고 pakage.json에 등록하여

전역으로 상태 관리를 하기 위한 도구입니다. Redux는 리액트가 아닌 곳에서도 사용이 가능하지만, context API는 React에서만 사용이 가능합니다. 리덕스는 한개의 저장소를 가지지만 context API 여러 저장소가 존재할 수 있습니다.Redux는 cont