1. React 기초

• Function component : return하고 스크린에 표시
• class component : React.Component를 확장하고 render메소드를 통해 스크린에 표시

1.1 React의 랜더링

• JavaScript를 이용해 element를 생성 -> ReactDOM이 HTML로 번역
• React 앨리먼트는 불변객체(immutable)
  불변객체란? 변하지 않는 객체
  ReactDOM.render(el, rootEl); 로 전달하고 변경 판단 및 반영은 리액트가 알아서 함
• Element 타입이 바뀌면 이전 앨리먼트는 버리고 새로 그림
• Element 타입이 같으면 key를 먼저 비교하고 props를 비교해서 변경사항을 반영

1.2 JSX

• JavaScript를 확장한 문법
• 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식
• JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용
• JSX는 주입 공격을 방지(기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프)
• Babel은 JavaScript Compiler로 JSX를 React.createElement() 호출로 컴파일

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',						// component
  {className: 'greeting'}, // props
  'Hello, world!'		   // contents
);

• 위의 두 코드는 같은 동작을 함
• babel을 import 한 후에는 <script type="text/barbel">를 명시해주어야함
• <React.Fragment></React.Fragment>를 사용하면 render할 때 불필요한 div가 생기지 않음. <></>로 대체 가능

1.2.1 spread 연산자

// Array
var arr1 = [1, 2, 3, 4, 5]; 
var arr2 = [...arr1, 6, 7, 8, 9]; 

console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

// String
var str1 = 'paper block'; 
var str2 = [...str1]; 
console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ]

1.3 이벤트 핸들러

• 보통 render 함수안에서 this는 render함수가 속해있는 컴포넌트 자체를 가르킴
• 이벤트 함수 안에서 this는 undefined이므로 사용하고자 하면 .bind(this)를 통해 사용해야함
• ex)
  onClick={this.add()} (x)
  onClick={this.add} (o)
  this.add()는 즉시 실행하고 this.add는 click했을때만 실행

let obj - {name:'Gildong'};

function bindTest(){
	console.log(this.name);
}

bindTest.bind(obj); // Gildong

• Vanlina JS : onclick, onmouseout, onfocus, onblur...
• React JS : onClick, onMouseOut, onFocus, onBlur...

...

const handleClick = () => alert("Pressed!");
const el = (
	<button
    	onClick={handleClick}
        onMouseOut={() => alert("bye")} >
    Pressed 
    </button>
);

ReactDOM.render(el, rootEl);

...

1.4 컴포넌트 상태

• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함
  - 순수함수? 동일한 입력값에 대해 동일한 결과를 반환

1.4.1 컴포넌트란?

DOM : 논리 트리
컴포넌트 : Element의 집합
Element : 요소, 불변객체. ReactDOM.render()을 통해 update

1.4.2 컴포넌트 상태 : useState

• 원본을 변경하는 push 말고 새로운 결과를 만들어내는 concat을 사용하는게 좋음(shouldComponentUpdate를 이용하기 위해서)
• let b = Array.from(a) // a 배열을 b로 복제. 같은 배열은 아님
• ex) const [min, setMin] = React.useState(0);
  첫번째 요소 : 데이터
  두번째 요소 : 함수

const App = () => {
  	const [keyword, setKeyword] = React.useState(""); // 상태값을 관리해주는 훅
  	const [result, setResult] = React.useState("");
  	const [typing, setTyping] = React.useState(false); //초기값 false

	function handleChange() {
		setKeyword(event.target.value);
		setTyping(true);
    }

    function handleClick() {
        setTyping(false);
        setResult(`We find results of ${keyword}`);
    }
};        

1.4.3 컴포넌트 사이드 이펙트 : useEffect

• 의도하지 않은 효과 or 부수 효과

React.useEffect(() => {
	console.log("effect");
}, []); // 두번째 값이 []이면 처음 한번만 실행, []안에 값을 주면 해당 인자가 바뀔때마다 실행

• 컴포넌트가 destroy될 때도 코드를 실행할 수 있음

• useEffect는 함수를 받고, 이 함수는 dependency가 변화할 때 호출
• 현재는 dependency가 비어있으니 컴포넌트가 처음 생성될 때 함수가 호출된 후 다시
  호출 되지 않음
• 컴포넌트가 파괴될 때도 함수를 실행하고 싶으면 useEffect 함수가 새로운 함수를 return함
  -> 왜냐면 deps가 비어있으면 자동으로 컴포넌트가 파괴될 때 cleanup함수가 실행되는데 그 과정이 리렌더링으로 useEffect함수가 실행되고 클린업하면서 이전에 있던 이펙트인 console.log(“created :) )가 삭제되고 새로운 이펙트 함수인 return함수가 실행되기 때문
• 리렌더링 -> 이전 이펙트 클린업 -> 이펙트 실행
  (참고 https://simsimjae.tistory.com/401)

1.5 훅

• 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능
• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState , 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공
• 최상위 레벨에서만 호출 가능 (반복문, 조건문, 중첩 함수 내부에서 호출 불가)
• 리액트 함수 컴포넌트 내에서만 호출 가능
• useState(), useEffect(), useContext(), useReducer(), useCallback(), useMemo(), useRef() ...

1.5.1 커스텀 훅

• use{Name}의 형식으로 사용

function useLocalStorage(itemName, value = "") {
    const [state, setState] = React.useState(() => {
      return window.localStorage.getItem(itemName) || value;
    });

    React.useEffect(() => {
      window.localStorage.setItem(itemName, state);
    }, [state]);

    return [state, setState];
}

1.5.2 hook flow

• useState : prev 값이 존재
• useEffect : 사이드 이팩트이므로 render가 다 동작하고 나서 실행

1.6 리액트 스타일

• React에서는 스타일을 적용할 때 class 대신 className을 사용
• style 속성 : 객체, 카멜케이스, className보다 먼저 우선순위

1.7 기타

1.7.1 화살표 함수

const a = () => <div>Hi</div>; // return을 쓰지 않아도됨
const b = () => { return <div>Hi</div> } // return을 명시적으로 사용해야함

1.7.2 Form 다루기

• event.preventDefault() : default로 실행되는거 막기
• console.dir(element);
• onChange : validation 체크 가능
• value : 원하는 값만 넣을 수 있도록 controlled

1.7.3 Error 다루기

• ErrorBoundary : Error를 Catch하여 핸들링 가능하도록 함
• Fallback : Error가 났을 때 보여줄 컴포넌트( callback아님 )

React강의로 넘어오고 나서 내용이 머리에 들어오지 않는다......🫥
내용도 어려운거 같은데 강의도 귀에 안들어와....