웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡하여 리액트는 어떠한 상태가 바뀌었을때,
아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작
리액트에서는 Virtual DOM 이라는 것을 사용해서 이를 가능케 함
그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다.
JSX 리액트 컴포넌트에서는 XML 형식의 값을 반환
ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미
어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용
props 는 객체 형태로 전달
Wrapper 에서 props.children 을 렌더링
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회
조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미
보통 삼항연산자를 사용한 조건부 렌더링을 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용
컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 true 로 설정한 것으로 간주
Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리
리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정
이벤트를 설정할때에는 함수타입의 값을 넣어주어야 한다는 것, 주의
Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정
컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리
함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용
input 의 개수가 여러개가 됐을때는
input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조
불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됩니다.
리액트에서는 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있습니다.
리액트 사용에서 DOM 을 직접 선택해야 하는 상황 => useRef
동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용
map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줍니다.
리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다.
useRef Hook 은 DOM 을 선택하는 용도 외에도, 다른 용도가 한가지 더 있는데요, 바로, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회
useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값
