introduction
React
리액트는 페이스북에서 만든 자바스크립트 기반의 virtual DOM 활용한 라이브러리? 또는 프레임워크라고 말할 수 있다.
- DOM 이란?
Document Object Model로 html과 xml 문서를 위한 프로그래밍 인터페이스를 의미한다.
DOM은 문서를 노드 및 개체로 나타낸다. 웹 페이지를 객체 지향적으로 표현함으로써 자바스크립트와 같은 스크립팅 언어로 수정할 수 있게 했다.
DOM의 문제점은 웹페이지의 하나의 항목만 클릭해도 웹 페이지는 전체를 업데이트 해야하기 때문에 DOM 전체를 다시 렌더링하게 된다. 이를 극복하기 위해 등장한 것이 Virtual DOM!
- Virtual DOM
HTML DOM 의 리액트를 위한 로컬 복사본이라고 생각하면 된다.
리액트를 활용하면 웹을 빠르게 불러올 수 있다는 장점이 있다.
JSX
자바스크립트의 확장자.
JSX를 통해서 리액트에서 Html을 사용할 수 있게해준다.
컴포넌트와 virtual dom을 지칭한다.
- 함수 뒤에 ()가 붙는다면 즉시 실행을 의미한다.
javascript
map
배열의 메소드
array의 각 아이템에 return을 적용하고 다시 array로 반환하는 것.
Set up
pass.
PROPS
COMPONENT
리액트의 함수라고 말할 수 있다.
- 컴포넌트는
- 함수 컴포넌트
- 클래스 컴포넌트
로 나뉜다.
PROPS는 리액트 component에서 다루는 데이터 전달 방식이다.
PROPS를 사용해야하는 이유
자식 컴포넌트가 부모가 가진 state를 사용하고 싶다면 props을 이용해야한다.
하위 컴포넌트에서는 props를 받아서 읽기만 가능하다.
props 또는 state가 변경이 되면 해당 props 나 state를 포함하고 있는 컴포넌트의 render 함수가 재호출된다.
propTypes는 전달받은 props를 내가 원하는 props인지 확인하게 도와주며 props의 타입을 바꿔주는 역할도 수행한다.
render : html의 요소나 react 요소의 코드가 눈으로 볼 수 있도록 시각화하는 것
리액트에서는 data를 html로 변환하도록 도와주고 render() 함수에게 전달해준다고 생각하면 좋다.
리액트에서 data에 접근할 때
1. 데이터 값에 접근할 때 {중괄호} 를 사용한다
2. 옵션의 이름은 사용자가 임의로 지정할 수 있다.
state
state는 동적 데이터와 함께 작업할 때 사용된다.
this 는 상위에서 선언한 함수의 객체를 불러올 때 사용한다.
- 클래스 안에서 함수를 선언할 때는 function을 입력하지 않아도 된다.
리액트의 컴포넌트 라이프사이클은 3가지로 분류할 수 있다.
1. Mounting : 컴포넌트가 화면에 등장
construct() 호출하는데
컴포넌트가 mount 되거나, screen에 뜨거나, 웹사이트에 전달될 때 contructor를 호출한다.
render() 호출과 componentDidMount()가 호출된다. (컴포넌트 호출이 완료 되었을 때)
- Updating : 컴포넌트가 업데이트 됨
- props 나 state가 변경되어 컴포넌트가 업데이트 되는 단계
setState를 사용할 때마다 실행된다.
- Unmounting : 컴포넌트가 화면에서 사라짐
컴포넌트가 다 끝났을 때 실행되는 함수
리액트에서 객체마다 각각의 유일한 key 값이 필요하다.
Mount
마운트란 리액트 컴포넌트에 해당하는 인스턴스나 Dom 노드를 작성하고 이를 DOM에 삽입하는 프로세스를 의미한다.
Constructor
컴포넌트의 인스턴스를 새로 만들때마다 생성자 메서드가 호출된다.
render
화면에 표현될 JSX를 반환하고 화면에 그린다.
componentDidMount
컴포넌트가 화면에 모두 그려진 이후 호출한다.
API Fetching
fetch: 가지고 오다.
자바스크립트에서는 데이터를 fetching 하기 위하여 fetch 를 사용하지만
리액트에서는 axios 를 사용할 수 있다.
fetch의 얇은 layer라고 생각하면 된다는데 무슨말인지 모르겠다...
json 파일은 읽는데 시간이 필요하기 때문에 자바스크립트가 이것을 실행하고 있는 것을 기다리게 해야한다.
axios가 끝날때까지 기다리게 하는 명령문이 await 이다.
await를 선언한 곳 외부에 async를 표기해두어야 한다.
ROUTING
리액트 라우터 돔은 네비게이션이라고 생각하면 좋다.
리소스 탐색 프로세스인데 클라이언트 요청으로 무엇을 할 지 결정하는 방법이다.
route에는 2가지 요소가 입력되어야 하는데
1. 렌더링 할 스크린과
2. 다른 props 들은 무엇을 해야하는지 가 입력되어야 한다.
a href 를 사용하지 않고 link to를 사용하는 이유
href는 새로고침을 하는 것과 같으므로 리액트의 성능을 저하시킨다.
물론 route 밖에서는 link to 를 사용할 수 밖에 없다.
Redirecting
link to 기능으로
링크를 눌러서 이동은 하지만 url링크에 넣으면 이동을 안 하는데
이는 url로 찾아가면 state가 수정이 안 되기 때문이다.
이것을 재정의해주는 과정을 redirecting 이라고 한다.
