React

다음 링크에서 LTS 버전 설치파일을 다운로드 받아서 설치한다.https://nodejs.org/ko/과거에는 설치파일을 다운로드 받아서 설치했는데 npm 으로도 설치가 가능하다.다음 명령어로 설치가 제대로 됐는지 확인하자.git bash 사용

리액트에서 컴포넌트의 종류는 2가지가 있다. 함수형 컴포넌트와 클래스형 컴포넌트이다. 다만, 버전 16.8 에 새로 도입된 Hooks 으로 인해 함수형 컴포넌트에서 클래스형 컴포넌트의 대부분의 작업을 할 수 있기 때문에 클래스형 컴포넌트는 넘어 가도록 하겠다. 기본

JSX Javascript XML의 약자로 리액트에서 UI를 정의하기 위한 문법이다. 생긴건 HTML 같이 생겼지만 실제로는 JavaScript 이다. 컴포넌트에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JS 로 변환해준다. 변환예시

Props > props는 속성을 나타내는 데이터이다. 출처 : 공식문서 props 는 properties 의 줄임말로 컴포넌트로 값을 전달할 때 사용한다. 기본 사용법 Props 전달 컴포넌트 태그안에 형태로 넣어서 사용한다. Props 사용 컴포넌트 함수의

조건부 렌더링 Javascript의 조건 처리처럼 컴포넌트의 렌더링 결과를 조건부로 결정할 수 있다. > React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. 출

useState 는 Hook 중에 하나이고, useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 출처 : 공식문서클래스형 컴포넌트에서만 사용할 수 있었던 state 를 함수형 컴포넌트에서도 사용할 수 있게 해준다.증가ㆍ감소 함수를 만들고, 각

ToDo 서비스는 여러개의 메모를 같은 형식으로 보여줘야한다. 하나의 컴포넌트를 반복문을 사용해서 나타내는 방법을 알아보자. ToDoList 생성 메모의 레이아웃이 되는 컴포넌트를 생성하고, App 컴포넌트에서 불러오자. 배열 todos 는 화면에 나타날 예시 데이터

저번 글에 이어서 배열에 데이터를 추가하는 방법을 알아보자.기존 배열의 변경에 리렌더링을 하기 위해서는 상태관리가 필요하다. 그러므로 기존 배열을 상태관리로 변경하자.기존 TodoList 컴포넌트에 배열에 추가할 데이터 입력을 위한 input, button 을 만들고,