[리액트 기초] 이벤트 핸들링, ref, 컴포넌트 반복, 컴포넌트 라이프 사이클 메서드, 컴포넌트 스타일링, 자동완성

이벤트 핸들링

const onChange = e => {
	const next = {
    	...form,
        [e.target.name] : e.target.value}
        setForm(nextForm);
    }
    
<input onChange={onChange} / >

 

ref : Dom에 이름 짓기

1. 사용 이유

- Dom을 직접 건드려야 할 때

ex 1. 특정 input에 포커스

ex 2. 스크롤 박스 조작

ex 3. canvas 요소 그림 그리기

 

2. 사용 방법

a. 콜백 함수

<input ref=((ref) => {this.input=ref}} />

 b. createRef

input = React.createRef();

 

 

 

컴포넌트 반복 (= 반복 데이터 렌더링)

배열의 map 이용 

 

const name = ['a', 'b', 'c', 'd', 'e']
const nameList = name.map((name,i) => <li key={i} > {name} </li>)
return <ul> {nameList} </ul>

 

컴포넌트 라이프 사이클 구성

1. 마운트

2. 업데이트

-  props, state, 부모 리렌더링, this.forceUpdate

3. 언마운트

 

 

컴포넌트 스타일링

css, sass, Css Module, styled-components

 

 

파일명 자동완성

root 파일에 jsconfig.json 생성

ctrl + space 누르고 Tab또는 enter

{
  "compilerOptions": {
    "target": "es2020"
  }
}

 

설정하면 파일 열지 않아도 파일 명 자동으로 import 가능