React 맛보기

JSX – 자바스크립트와 html의 중간인 새로운 표현식

이를 이해하기 위해서는 Babel이라는 컴파일러가 필요하다.

 

컴포넌트 -> 엘리먼트의 집합

use로 시작하는게 react에서 훅임

 

useState – 변경되는 변수 값을 사용할 때??? Const [value, setValue] = React.useState(“default value”);

-> 상태값을 관리해주는 훅

-> 초기값을 넣어줄 수 있는데 가져오는데 오래 걸리면 함수를 써서 lazy init을 할 수 있다.

-> useState로 만들어진 set함수는 이전 값이 저장되어있음 -> prev

 

 

컴포넌트 사이드 이펙트 다루기

- useEffect(함수, 배열)

• 함수 – 실행되는 것
• dependency 배열 – side effect를 일으키고 싶은 대상, 값을 주지 않으면 모든 값
• useEffect(function, deps);
• deps(빈값) : 해당 컴포넌트가 렌더링 될때마다 실행
• deps([]) : 처음 렌더링될 때 한번실행
• deps(props) : 해당 state가 업데이트 되었을 때 실행
• useEffect에 return 값이 있으면 unmout될 때(사라질 때)

- 상태 값이 바뀔 때만 일어남

 

 

 

커스텀 훅

- 반복되는 Hook은 function으로 묶어서 custom한다.

 

 

 

Hook flow이해

부모 render -> 자식 render -> 부모 cleanup Effect -> 자식 useEffect -> 부모 useEffect

Update시 -> useEffect clean up이 먼저 발생하고 useEffect

한번이라도 useEffect가 등록이 되어있었으면 cleanup하고 실행됨

 

 

 

리엑트 element에 스타일 입히기

props = { className, style, …rest }    rest 그외

style – 객체, 카멜케이스, className보다 먼저

 

 

 

React에서 Dom조작하기

Ref : 어떤 값을 특정할 수 있다. 어떤 값은 element가 될 수 있고 다른 value가 될 수 있다.

Const divRef = React.useRef();

<div ref ={divRef}/>

React.useRef -> ref.current.~ 로 접근가능

Js -> document.get~ /document.query            React -> useRef/ref

 

 

 

21. Form다루기

Console.dir() : 자바스크립트 객체의 전체 구조를 알려준다. -> 구조모를 때 사용해보기

onSubmit의 기본 동작 방지 -> Event.preventDefault();

validation

useState로만으로는 싱크가 안맞을 수 가 있다. -> event로 확인하고 나중에 set해주자d

-> Validation은 onChange에서 편하다

-> Controlled input의 value를 react의 component에서 관리하는 것

 

 

 

23. Error다루기

Error가 나면 모든 React의 Component가 그려지지 않을 수 있다.

Ex) Child Component가 Error가 났을 때 parent Component가 그려지지 않는다.

-> Class ErrorBoundary extends React.Component 를 사용한다. 핸들링을 할 Compenet를 만든다 -> static getDerivedStateFromError(error)를 사용

 

 

 

25-26. Key와 렌더링 알아보기

Key는 value를 특정하는 이름

key값이 있다면 재조정할 때 빠르게 할 수 있음, 재조정이 쉬워짐, 리렌더링

 

 

 

27. 상태 끌어올리기

형제들 간에서 상태를 알기 어렵다.

-> 부모로 상태관리를 끌어올린다.

-> 부모함수에 자식들 상태 값 관리하면 됨

-> 많은 단계가 있고 상태를 알기 위해 과도하게 끌어올리면 drilling(props로 계속 전달해 줘야함)을 야기한다. -> 어디서 상태가 바뀌는지 모르는 상황이 발생할 수 있다.

 

 

 

28. 데이터 Fetch 해보기

API call

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능

 

fetch("https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json")

.then(function (response) {return response.json();})

.then(function (myJson) {console.log(JSON.stringify(myJson));});

 

상황별 핸들링 – 로딩/데이터/에러