• 리스트에서의 키는 리스트에서 아이템을 구별하기 위한 고유한 문자열이다.
• 어떤 아이템이 변경, 추가 또는 제거되었는지 구분하기 위해 사용한다.
• 키는 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다.

• 제어 컴포넌트는 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다.

• 콜백 함수로 사용할 때
• 이벤트 핸들러로 사용할 때
• 메서드를 변수에 할당할 때
• bind 함수는 특정 this 값을 강제로 설정할 수 있다.

• 삼항 연산자를 사용한다.
• 중첩하여 사용할 수 있지만 가독성이 떨어질 수 있다.

• 삼항 연산자를 사용한다.
• 문자열이나 엘리먼트를 넣어서 사용 가능하다.

• 이름은 use로 시작해야 한다.
• 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.

• 함수형 컴포넌트에서도 state나 생명주기 함수의 기능을 사용하게 해주기 위해 추가된 기능
• state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 함수를 의미
• hook의 이름은 모두 use로 시작

• useState는 함수형 컴포넌트에서 state를 사용하기 위한 Hook

• 사이드 이펙트를 수행하기 위한 함수
• 클래스 컴포넌트의 생명주기 함수와 같은 기능을 하나로 통합한 기능을 제공
• useEffect(이펙트 함수, 의존성 배열);
• 의존성 배열은 이펙트가 의존하고 있는 배열로 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 이펙트 함수가 실행

• 이전 계산값을 갖고 있기 때문에 연산량이 많은 작업의 반복을 피할 수 있음
• 의존성 배열을 넣지 않을 경우 렌더링이 일어날 때마다 함수가 실행되어 의미가 없음 -> 의존성 배열을 넣어야 함!

• useMemo와 비슷한 역할 차이점은 값이 아닌 함수를 반환

• 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미
• 객체에는 .current라는 속성이 있는데 이것은 현재 참조하고 있는 엘리먼트를 의미

• 최상의 레벨에서만 호출해야 한다!(반복문이나 조건문 중첩된 함수 안에 넣어서는 안된다)
• 리액트 함수 컴포넌트에서만 훅을 호출해야 한다(일반적인 자바스크립트 함수에서 훅을 호출하면 안된다)

• 앱을 이루는 가장 작은 조각

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체

• pure function은 클래스의 멤버나 상태를 변경하지 않기로 하는 함수
• 일반적으로 pure function은 값을 구해오거나 데이터 값을 출력하기만 하는 작업에 사용
• impure function은 자유롭게 상태를 변경할 수 있는 함수

• React Element를 생성한다.
• React Element 자체로는 DOM 요소를 생성하지 않는다
• 쓰기 불편하다.. (React 17 이후로는 개선된 JSX Transform을 지원)

• 항상 대문자로 시작 .. react는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문
• 컴포넌트 파일 이름과 컴포넌트 이름은 같게 해야 한다

• 리액트에서는 컴포넌트 안에 또 다른 컴포넌트를 사용할 수 있기 때문에 복잡한 화면을 여러 개의 컴포넌트로 나누어 구현할 수 있다

• 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있다
• 처음부터 1개의 기능만 사용하도록 설계하는 것이 좋다

• state는 리액트 컴포넌트의 상태(변경 가능한 데이터)를 의미
• state가 변하면 다시 렌더링이 되기 때문에 렌더링과 관련된 값만 state에 포함시켜야 한다

• 리액트 만의 특별한 형태가 아닌 자바스크립트 객체
• state는 변경은 가능하지만 직정 수정하면 안된다(못 바꾼다고 생각) - 변경하려면 setstate() 함수를 사용

• constructor가 실행 되면서 컴포넌트가 생성
• 생성 후 componentDidMount() 함수가 호출
• 컴포넌트가 소멸하기 전까지 여러 번 렌더링
• 렌더링은 props, setState() forceUpdate() 에 의해 상태가 변경됨
• 렌더링이 끝나면 compomentDidUpdate() 함수가 호출
• 마지막으로 컴포넌트가 언마운트 되면 componentWillUnmount() 함수가 호출

• 공유 가능한 방식으로 데이터를 정의하고 저장할 수 있는 언어
• XML 파일을 사용하면 모든 네트워크에서 데이터를 손쉽게 전송할 수 있다

• XML과 HTML을 JS로 변환시켜준다
• createElement 함수를 사용하여 자동으로 JS로 변환시킨다
• 가독성을 높여준다

• HTML 코드와 비슷하여 자바스크립트 코드만을 사용했을 떄보다 더 익숙하며 가독성이 좋다
• div, span 같은 HTML 태그를 사용할 수 있으며, 개발자가 만든 컴포넌트도 JSX 안에서 작성할 수 있기 때문에 활용도가 높다

• 모든 자바스크립트 문법을 지원
• 자바스크립트 문법에 XML과 HTML을 섞어서 사용

• 엘리먼트는 리액트 앱을 구성하는 요소
• 엘리먼트는 자바스크립트 객체 형태로 존재한다.

• 리액트 엘리먼트는 리액트에 Virtual DOM의 형태로 존재
• DOM 엘리먼트는 실제 브라우저의 DOM에 존재

• 불변성(한번 생산된 엘리먼트의 children이나 attributes를 바꿀 수 없다)

• 이떄는 컴포넌트를 통해 새로운 엘리먼트를 생성해야 한다
• 그 다음 이전 엘리먼트와 교체를 하는 방법으로 내용을 바꾼다

• ReactDOM.render();

리액트란?

• 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
• SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구

프레임워크와 라이브러리의 차이점

• 프레임워크는 개발을 위한 기본 구조와 규칙을 제공하는 도구
• 개발자는 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야 한다
• 라이브러리는 개발을 위해 재사용 가능한 코드의 집합이며 함수,클래스,모듈 등으로 구성된다
• 개발자가 필요한 기능을 호출하며 코드의 흐름과 제어를 직접 관리한다

리액트의 장점(속도, 컴포넌트)

1. 랜더링이 빠르다(Virtual DOM)

DOM은 동기식 서버에 있던 파일이 변하면 다시 동기화해서 내려받는 방식
Virtual DOM은 비동기식은 한번 랜더링할 때 파일을 임시로 보관 후 파일이 변하면 변한 부분만 그 부분만 다시 저장하는 방식

parsing :

2. 컴포넌트 기반 구조

• 리액트의 모든 페이지는 컴포넌트로 구성
• 하나의 컴포넌트는 다른 여러 개의 컴포넌트의 조합으로 구성됨
• 컴포넌트 구조를 사용하기 때문에 재사용성이 뛰어남
• 컴포넌트 이름은 파스칼케이스로 저장
• 재사용성이 가능하려면 해당 모듈의 의존성이 없어야 한다

3. 메타에서 오픈소스 프로젝트로 관리하고 있다

4. 활발한 지식 공유& 커뮤니티가 있다

5. 모바일 앱 개발 가능

• 리액트 네이티브라는 모바일 환경 UI프레임워크를 사용하면 크로스 플랫폼 모바일 앱을 개발할 수 있습니다

리액트의 단점

1. 방대한 학습량

• 자바스크립트를 공부하면 빠르게 학습할 수 있다(모든 걸 알아야 하진 않기 때문에 방대하진 않다..)

2. 높은 상태 관리 복잡도

• life cycle 함수를 이해해야 하기 때문에 복잡하다(요즘에는 hook 라이브러리를 사용해 보다 쉽게 사용이 가능하다)

     Hook이란?

  • 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리
  • 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

• 순차적 접근을 뛰어넘는 태그를 통한 구조적 표현이 가능한 언어

• 다수의 페이지를 하나의 페이지처럼 처리하는 기술
• 필요한 데이터만 받아와서 현재 화면에 렌디링하는 방식
• 스크롤 할 때마다 컨텐츠를 불러온다
• 페이지 전환시 로딩 속도와 반응성이 좋다
• but, 첫 페이지 로딩 속도가 느리다

• CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당한다
• 예시와 같이 선택자인 HTML요소를 선택해 속성과 속성값을 선언부로 사용하여 작성한다

h1 {
  color: red;
  font-size: 5em;
}

• JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어

함수

• 다른 객체처럼 속성 및 method를 가질 수 있는 객체이며 인자를 가질 수 있는 코드 블록이다.
• 함수를 사용하는 이유는 코드 재사용, 동일한 코드를 여러 번 사용하며 다른 결과를 도출할 수 있기 때문이다.

함수의 특징

• 변수 안에 담길 수 있다(함수가 값이기 떄문에)
• 다른 함수의 인자값을 전달될 수 있다
• 함수의 return값으로도 사용할 수 있다
• 객체의 속성 안에 method로 담길 수 있다
• 배열의 값으로도 사용할 수 있다

화살표함수

• 코드를 더 간결하고 가독성 좋게 작성할 수 있게 만들어준다
• 그러나 this, super 등에 대한 자체 바인딩이 없고, 메서드로 사용할 수 없다
• 생성자로도 사용할 수 없다