모바일 웹 구축 실무 중간고사 정리

npx create-react-app ? : ? 리액트 프로젝트 만들기
npm start: 프로젝트 실행

리액트의 장점
빠른 업데이트, 빠른 렌더링 속도
모바일 앱 개발 가능

리액트의 단점
방대한 학습량, 높은 상태 관리 복잡도

Node.js와 npm 설치

JSX를 쓰면 코드가 간결해지고 생산성과 가독성 향상

엘리먼트 - 리액트 앱의 가장 작은 블록

리엑트 엘리먼트는 DOM엘리먼트의 가상표현

엘리먼트를 렌더링하기 위해 ReactDOM.createRoot( ); render( ) 함수 사용

엘리먼트 업데이트는 새로운 엘리먼트를 생성해 바꿔치기 하는 방식

리액트는 컴포넌트 구조이다

컴포넌트 구조란 페이지가 컴포넌트로 구성되는 것을 말한다.

Props는 리액트 컴포넌트의 속성이다

Props를 사용하는 법은 JSX를 사용하면 컴포넌트에 키-값 형태로 넣어주면 됨

JSX를 사용하지 않는 경우에는 creatElement 함수의 두번째 파라미터로 
자바스크립트 객체를 넣어주면 된다.

컴포넌트의 종류는 함수 컴포넌트와 클래스 컴포넌트가 있다

함수 컴포넌트는 함수 형태로 된 컴포넌트 이다.

클래스 컴포넌트는 ES6의 클래스를 사용하여 만들어진 컴포넌트 이다.

컴포넌트의 이름은 무조건 대문자로 시작해야 한다.

컴포넌트 렌더링은 컴포넌트로 부터 엘리먼트를 생성하여 리액트 DOM에 전달하는 것 이다

컴포넌트 합성 이란 여러 컴포넌트를 하나의 컴포넌트로 만드는 것 이다.

컴포넌트 추출은 큰 컴포넌트에서 일부를 추출해 새로운 컴포넌트를 만드는 것 이다.

State는 리액트 컴포넌트에서 변경 가능한 데이터이다.

클래스 컴포넌트에서는 생성자에서 모든 state를 한번에 정의하고
변경하려면 setState함수를 사용해야 한다.

함수 컴포넌트에서는 useState 훅을 사용하여 각각의 state를 정의 한다.

각 state별로 주어지는 set함수를 사용하여 state 값을 변경한다.

생명주기
componnentDidMount() - 마운트
-컴포넌트 생성

componentDidUpdate() - 업데이트 
- 컴포넌트의 Props가 변경될 때
- setState() 함수 호출로 state가 변경될 때
- forceUpdate() 라는 강제 업데이트 함수가 호출 될때

componentWilllUnmount() - 언마운트
- 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때

컴포넌트는 시간의 흐름에 따라 생성되고 사라지는 과정을 겪음

Hook - 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것

useState()
•state를 사용하기 위한 훅
•사용법
const [변수, set함수] = useState(변수의 초기값);
변수 각각에 대해 set 함수가 따로 존재

useEffect()
•사이드 이펙트를 수행하기 위한 훅
•사이드 이펙트 - 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업
•useEffect() 훅만으로 클래스 컴포넌트의 생명주기 함수들과 동일한 기능 수행 가능
•사용법
useEffect(이펙트 함수, 의존성 배열);

의존성 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 이펙트 함수가 실행됨
의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트 시 한 번씩만 실행됨
의존성 배열 생략 시 컴포넌트가 업데이트될 때마다 호출됨

useEffect()에서 리턴하는 함수는 컴포넌트가 해제될 때 호출됨

useMemo()
•Memoized value를 리턴하는 훅
•연산량이 높은 작업이 매번 렌더링될 때마다 반복되는 것을 피하기 위해 사용
•렌더링이 일어나는 동안 실행되므로 렌더링이 일어나는 동안 실행돼서는 안되는 작업을 useMomo()에 넣으면 안 됨
•사용법
const memoizedValue = useMemo(값 생성 함수, 의존성 배열);
의존성 배열에 들어있는 변수가 변했을 경우에만 값 생성 함수를 호출하여 결과값 반환
그렇지 않은 경우에는 기존 함수의 결과값을 그대로 반환
의존성 배열을 생략하면 렌더링이 일어날 때마다 매번 함수가 실행되므로 의미 없음

useCallback()
•useMemo() 훅과 유사하지만 값이 아닌 함수를 반환
•컴포넌트 내에 함수를 정의하면 매번 렌더링이 일어날 때마다 함수가 새로 정의되므로 useCallback() 훅을 사용하면 불필요한 함수 재정의 작업을 없앨 수 있음
•사용법
const memoizedCallback = useCallback(콜백 함수, 의존성 배열);
의존성 배열에 들어있는 변수가 변했을 경우에마 콜백 함수를 다시 정의해서 반환

useRef()
•레퍼런스를 사용하기 위한 훅 (레퍼런스: 특정 컴포넌트에 접근할 수 있는 객체)
•매번 렌더링될 때마다 항상 같은 레퍼런스 객체를 반환
•사용법
const refContainer = useRef(초기값);
.current라는 속성을 통해서 접근

Hook의 규칙
⁃무조건 최상위 레벨에서만 호출해야 함

•반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안 됨
•컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 함

⁃리액트 함수 컴포넌트에서만 훅을 호출해야 함

•훅은 리액트 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 훅에서만 호출할 수 있음