1. useState const [state, SetState] = useState('initialState'); ▶ state는 ui 바꾸기 위해서 & 랜더링을 다시 하기 위함 ▶ 구조분해할당으로 받아서 사용 = return 배열 [ 초기값 갖고 있는 변수, 상태를 변경하는 메서드 Set ] ▶ 특정 기능을 수행하는 것들 = hook (useState, useEffect, useContext, useMemo 등) 2. 리액트 라이프 사이클 : 컴포넌트 생명주기 ▶ mounting - updating - unmounting ▶ (화면보임) - (화면갱신) - (화면에서 죽음) ▶ 컴포넌트가 화면갱신을 하기 위해 "랜더링"(state가 변경)되야함. 3. 불변성 ▶ 메모리에 있는 값을 변경할 수 없는 것...

// rfce import React, { useState } from 'react'; import './App.css'; function App() { const [name, setName] = useState(''); const [age, setAge] = useState(''); const nameChangeHandler = (event) => { setName(event.target.value); }; return ( nameChangeHandler(event)} /> ); } export default App; ★ 중요 포인트 ★ 태그에서 onChange를 {} event를 매개변수로 받는 함수를 넣는 경우, * onChange = {nameChangeHandler(event)} => 이렇게 작..

// rfce import React, { useState } from 'react'; import Layout from 'Layout'; const divStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '10px', border: '1px solid green', width: '100px', height: '100px', }; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; * Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함. * html의 class를 사용할때는 JSX에서는 className..

1. props children 사용 ( props의 주요개념 ) - 부모 컴포넌트에서 자식 컴포넌트로 props 해서 값 전달하듯이 -자식컴포넌트를 태그로 열고 닫으면 children으로 인식 됨 import React from 'react'; function User(props){ console.log(props); //{children: 헤헤} return {props.children}; //헤헤 } function App(){ return ( 헤헤 ; ); } export default App; 2. children의 용도 & 렌더링 방법 - 용도 : 항상 나와야하는 부분이라면 (머릿글 같은) 그 밑에 children을 받아서 사용하기

1. props 개념 - 컴포넌트 간의 정보 교류 방법 - 부모 컴포넌트에서 자식에게 넘겨준 데이터들의 묶음 (객체) 2, props를 통해 부모->자식으로 값 전달 - ★부모에서 자식으로만 가능 ★ - ★읽기전용 + 변경 불가능 ★ 3 자식 컴포넌트에서 부모에게 받은 값 렌더링 가능 import React from 'react'; function App(){ function Child(props){ return {props.grandFatherName} //"엄마" } function Mother(props){ return ; // props로 name전달함 } function GrandFather(){ const papaName ="홍길동"; return ; // props로 name전달함 } ret..

1. JSX 문법이란? - JavaScript + xml - 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 (UI)작업 편하게 가능 *리액트에서 뷰를 그리는 방법* - JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다 - 리액트는 딱 하나의 html파일만 존재 (SPA 프레임워크) 2. 프로젝트 내의 JSX 문법 사용하기 (1) 무조건 1개의 엘리먼트 반환하기 function App(){ return ( ~~ ~~~ ); } (2) JSX에서 JS 값을 가져올때는 중괄호{} ! function App(){ const cat_name = 'kitty'; return ( hello {cat_name}; ); } (3) class 대신 className 사용 (4) 인라인..