말로 풀어쓴 리액트

props가 없을 때props(properties)를 사용할 때 children를 사용할 때props, children 정리 App.js, First.js, Second.js 모두 src 폴더 안에 있으면 실행됩니다. (create-react-app)하면 생기는 디렉

state 설명 (props와 비교)함수형 컴포넌트 useState클래스형 컴포넌트 초기값(constructor, state), setStatestate는 컴포넌트 내부에서 바꿀 수 있는, 바뀔 수 있는 값입니다. props는 부모 컴포넌트에서 설정하여 자식 컴포넌트로

목차리액트 이벤트 표기법 주의사항클래스형 컴포넌트에서의 이벤트 핸들링함수형 컴포넌트에서의 이벤트 핸들링 1) 이벤트 이름은 카멜 표기법을 따라야 한다.ex) 'HTML: onclick' -> 'React: onClick', 'HTML: onkeyup: onKeyUp'

목차 SPA란? 프로젝트 준비 및 기본적인 사용법 Route 하나에 여러 개의 path 설정하기 URL 파라미터와 쿼리 서브 라우트 리액트 라우터 부가 기능 1. SPA란? 1) SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어다.

목차axios로 API 호출해서 데이터 받아오기뉴스 뷰어 UI 만들기데이터 연동하기카테고리 기능 구현하기1) axios.get2) async - awaitstyled-components를 이용해 컴포넌트를 만들었다.import styled from 'styled-com

목차리액트 라우터 적용하기usePromise 커스텀 Hook 만들기기존에는 카테고리 값을 useState로 관리했다. 카테고리에 따라 다른 뉴스를 보여줘도 같은 주소값이었다. 이번에는 state 대신, 라우터 URL 파라미터를 이용해볼 것이다.BrowserRouter를

목차Context API를 사용한 전역 상태 관리 흐름 이해하기기본적인 사용법 익히기동적 Context 사용하기Consumber 대신 Hook 또는 static contextType 사용하기 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리

목차개념 미리 정리하기리액트 없이 쓰는 리덕스리덕스의 세 가지 규칙1.1) 액션상태에 어떤 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현된다. 액션 객체는 type 필드를 반드시 갖고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다.

17.2.1 카운터 컴포넌트 만들기17.2.2 할 일 목록 컴포넌트 만들기 준비하17.3.1 counter 모듈 작성하기17.3.1.1 액션 타입 정의하기17.3.1.2 액션 생성 함수 만들기17.3.1.3 초기 상태 및 리듀서 함수 만들기17.3.2 todos 모듈

목차 17.1 작업환경 설정 17.2 UI 준비하기 17.2.1 카운터 컴포넌트 만들기 17.2.2 할 일 목록 컴포넌트 만들기 17.3 리덕스 관련 코드 작성하기 17.3.1 counter 모듈 작성하기 17.3.1.1 액션 타입 정의하기 17.3.1.2 액

목차 17.1 작업환경 설정 17.2 UI 준비하기 17.2.1 카운터 컴포넌트 만들기 17.2.2 할 일 목록 컴포넌트 만들기 17.3 리덕스 관련 코드 작성하기 17.3.1 counter 모듈 작성하기 17.3.1.1 액션 타입 정의하기 17.3.1.2 액