JSX 기본 문법
-
무조건 태그를 닫아줘야 한다.
<div></div>혹은 셀프 클로징 태그</input>를 사용한다. -
두개 이상의 엘리먼트는 무조건 하나의 엘리멘트로 감싸져있어야 한다. div 태그도 좋지만
<Fragment>태그를 사용하면 불필요한 div태그를 줄일 수 있다. -
JSX내부에서 자바스크립트 값을 사용할때에는 { } 로 감싸준다.
-
Let, const 는 scope가 블럭 단위로 되어있고, var는 함수 단위다.
const - 한번 선언 후 고정적인 값
let - 유동적인 값 -
조건부 렌더링
- { 조건 ? True : false }
- { 조건 && true }
- 스타일 적용 -> 객체 형태로 적용 , 카멜케이스(ex. background-color -> backgroundColor)
- JSX 내부 주석 { / 주석 / } 으로 감싸주기, 태그 내부에서도 //로 주석 처리 가능
Props / State
Props
부모 컴포넌트가 자식 컴포넌트에게 값을 전달해 줄 때 사용한다.
함수형 -> 초기 마운트 속도가 미세하게 빠름, 메모리 자원도 적게 사용함
State
컴포넌트 안에 있으면서, 내부에서 변경할 수 있다 -> setState() 사용[ 사용하지 않으면 리렌더링이 일어나지 않아서 값이 안바뀜!]
lifecycle
Mounting(컴포넌트가 브라우저에 나올 때)
Constructor
생성자 함수로 만든 컴포넌트가 브라우저에 나올 때 가장 먼저 실행되는 함수
초기 설정, 미리 작업해야하는 일이 있을 때 사용
getDerivedStateFromProps
porps를 state에 동기화 해야할 때
Updating과정에서도 props가 바뀔 때 실행된다
Render
DOM, 내부 태그 전달 값 등을 정의
ComponentDidMount
외부 라이브러리 같은 걸 가져와야할 때 사용
컴포넌트가 나타날 때 시간 주기?
이벤트 리스닝할 때
Updating(컴포넌트의 props/state가 바뀌었을 때)
getDerivedStateFromProps
shouldComponentUpdate
최적화 할 때
부모가 렌더링 되면 자식도 렌더 함수가 실행되는데 이 때 자원 낭비를 막기 위해서 렌더를 막을 수 있다
true/false를 반환할 수 있다. -> 렌더를 막을 수 있다.
Render
getSnapshotBeforeUpdate
렌더링 후 결과가 브라우저에 반영되기 바로 직전에 호출
디자인적인 요소들, 사전에 가져와야 할 데이터들을 사용할 때
componentDidUpdate
컴포넌트가 업데이트 되었을 때 호출됨
state가 바뀌었을 때 과거 데이터와 새로운 데이터를 비교할 때 사용할 수 있다.
Unmounting(컴포넌트가 브라우저에서 사라질 때)
componentWillUnmount
컴포넌트가 사라지는 과정에서 호출
리스너를 삭제할 때 사용가능
Key는 고유 번호같은 느낌, 데이터를 추가/삭제할 때 효율적으로 사용 할 수 있음
