2022_02_04

Dalaran·2022년 2월 4일

TIL: Today I Learned

TIL

목록 보기

15/24

Class

class 객체 혹은 인스턴스를 만들어 두고 new (클래스명) 으로 만들어 사용한다.

ex) new Date() 함수

: class Date 안의 기능들이 존재하고 date로 선언한 new Date() 안의 기능들을 뽑아 쓸 수 있다.

OOP(Object-Oriented Programming) - 객체 지향 프로그래밍 : 주로 백엔드에서 많이 사용한다.
class형 컴포넌트는 react에 있는 Component를 import해 extends(상속) 하여 사용한다.
클래스형
- Hook 없이 state, lifeCycle 구현 가능
- 표현방법이 명시적이며 기능이 조금 더 많다.
함수형
- Hook을 이용한 state, lifeCycle 구현
- 클래스형에 비해 간결한 표현
공식적으로는 함수형 컴포넌트를 Hook과 함께 사용 할 것을 권장하고있다.

This

클래스형 컴포넌트에서 선언한 메서드를 참조하기 위해서는 this를 사용해야한다.

state, props, refs, 컴포넌트 메서드, 생명주기 메서드를 참조할 수 있다.

class 내 모든 것들에 접근하는데 bind(this)를 통해 내부 요소를 명시하지 않으면 최상단(window)를 this로 인식한다.
이는 화살표함수로 선언하는 것으로 해결 할 수 있다.

class MycounterPage extends Component {
	state = {
		count: 0,
	}
	
	onClickCounter() {
		this.setState((prev) => ({count: prev.count + 1}))
	}

	onClickArrowCounter = () => {
		this.setState((prev) => ({count: prev.count + 1}))
	}
}

render () {
	return (
		<>
			<div>button onClick={this.onClickCounter.bind(this)}</div>
			<div>button onClick={this.onClickArrowCounter}</div>
		</>
	)
}

Life Cycle

컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.

그리기 → render

첫번째 redering
그리고 난 뒤 → componentDidMount

reder 후 mount
그리고 난 뒤 변경 → componentDidUpdate

첫번 째 render 후 rerender 시 호출
그리고 난 뒤 사라짐 → componentWillUnmount

컴포넌트 사용을 마칠 때 호출

useRef

특정 태그를 조작하기 위해 선택할 때 사용하는 도구이다.

ex) input tag를 선택하여 커서를 깜빡이도록 하고 싶을 때

useEffect

컴포넌트가 그려진 이후 실행되는 함수이다.

useEffect와 useRef를 이용하여 자동 스크롤, 자동 포커스 등을 구현할 수 있다.

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input type="password" ref={inputRef} />;