React

Java Script eXtenstion (자바스크립트의 확장 문법) JavaScript + xml,html react 코드 const element = <h1>Hello,World</h1> JSX의 역할 : 내부적으로 HTML을 JS로 변환하는 과정을 거침. 최종적

Rendering Elements element : 리액트 앱을 구성하는 가장 작은 블록들 const element = <h1>hello world</h1> → 리액트 elements는 자바스크립트 객체 형태로 존재

Component-based : 리액트는 컴포턴트기반의 구조이다. 모든 페이지가 컴포턴트로 이루어져있고 하나의 컴퍼넌트는 또 다른 컴포넌트들로 되어있다. 일반적인 입력과 출력 구조 입력 → javaScript → 출력 리액트의 입력과 출력 구조 props -> reac

## state: = 리액트 컴포넌트의 상태 = 리액트 컴포넌트의 변경 가능한 데이터 = state는 개발자가 정의한다. = 렌더링이나 데이터 흐름에 사용되는 값만 state에 포한시켜야 함 = state는 javascript의 객체이다. = state는 직접 수정할

컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트가 존재한다hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트와 동일하게 기능한다.

이벤트?사건특정 사건을 의미사용자가 버튼을 클릭한 사건 → 버튼 클릭 이벤트이벤트 처리 = 이벤트를 헨들링한다.&lt;Dom의 이벤트 → onclick으로 처리>&lt;리액트의 이벤트>⇒ 차이 : onClick 대문자와 “”, { } camel표기법 ⇒ 낙타의 등 =

Condition → 조건에 따른 렌더링 → 조건부 렌더링 → 어떠한 조건(조건문)에 따라서 렌더링이 달라지는 것 → 예) true이면 보여주고 false면 감춘다. Truthly: true는 아니지만 true로 여겨지는 값Falsy: false는 아니지만 f

List =목록 = array : 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것 keys = 열쇠 = 열쇠는 다 모양이 다르다. = 고유의 모양이 있다 = 각 객체나 아이템을 구분할 수 있는 고유한 값 = 아이템들을 구분하기 위한 고유한 문자

양식 - 회원가입 같은 것사용자로부터 입력을 받기 위해 사용state를 통해서 데이터를 관리: 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 것: 값이 리액트의 통제를 받는 input form elements를 의미: 사용자의 입력을 직접적으로 제어할 수 있음h

- shared state : state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 : 하위 컴포넌트가 공통된 **부모 컴포넌트의 state를 공유하여 사용하는 것**

## Compositon : 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 : 합성, 조합 → 여러개의 컴포넌트들을 어떻게 조합할 것인가? ⇒ 리액트의 컴포넌트 합성 방법 두 가지 1. containment : 담다/포함하다. : 하위 컴포넌트를 포함하는

React.createContext( )함수의 파라미터로 기본값을 넣어주면 된다.리액트에서 랜더링이 일어날때 context객체를 구독하는 하위 컴포넌트가 나오면 현재 context 값의 가장 가까이에 있는 상위 레벨의 provider로 부터 받아오게 된다. 만약 상위

기존의 리액트 에플리케이션은 데이터가 컴포넌트의 프롭스를 통해 부모→ 자식인 단방향으로 전달.하지만 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 코드도 많아 복잡해지고 사용하기에 복잡했다.그래서 등장한 것이 context이다.context는 리액트 컴포넌트들 사이

: tagged template literal를 사용해서 구성요소에 스타일을 지정한다.: template literal은 자바스크립트에서 제공하는 문법중 하나이다.literal : 소스코드에서 고정된 값을 의미 (상수랑은 다른 의미)template literal : 리

: facebook.com/games , facebook.com/places 처럼 path를 정할 수 있다. 리액트에서는 리액트 라우터 돔이라는 패키지를 이용해서 각 경로에 따라 다른 컴포넌트를 보여주도록 만든다.라우팅 라이브러리라는 뜻.웹사이트에서 라우팅이라고하면 ,

미니블로그 만들기 기획 필요한 기능 글 목록 보기 기능 (리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 세팅 Step1. 프로젝트 생성 create-react-app을 사용해 프로젝트 생성 Step2. 프로젝트 디렉터리에 들어기