Hayo's

1. LifeCycle Method의 이해 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다 컴포넌트의 수명: 페이지에 렌더링되기 전인 준비 과정에서 시작→ 페이지에 사라질 때 끝남 라이프사이클 컴포넌트는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 작업을 처리할 수 있다 라이프사이클 메서드의 종류는 총 9가지가 있다 Will 접두사가 붙은 메서드 - 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 - 어떤 작업을 작동한 후에 실행되는 메서드 이 메서드 들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다 라이프사이클은 총 3가지, Mount, Update, Unmount 카테고리로 나눈다 Mount - DOM이 생..

ref (reference) 란? HTML 에서 id를 사용하여 DOM에 이름을 다는 것 처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 리액트 컴포넌트 안에서도 id를 사용할 수 있긴 하지만, id를 달아놓은 컴포넌트를 여러 번 사용할 경우 중복 id를 가진 DOM이 여러 개가 생기게 되므로 잘못된 사용이다! 반면에, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위의 id와 같은 문제가 발생하지 않는다. 1. ref는 어떤 상황에서 사용해야 할까? → DOM을 꼭! 직접적으로 건드려야 할 때 state를 사용하여 많은 기능을 구현할 수 있지만, state만으로 해결할 수 없는 기능들을 구현할 때 === DOM에 직접적으로 접근해야 할 때, ref를 사용한다. 특정 in..

1. JSX 란? JavaScript의 확장 문법이다 JavaScript의 모든 문법이 포함되어 있음 BUT, 공식적인 JavaScript 문법은 아니다. Babel에서 여러 문법을 지원할 수 있도록 preset, plugin을 설정해 주어야 함. XML과 비슷하게 생김 - tag가 비어있다면 /> 으로 꼭 닫아줘야 한다 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 Babel에 의해 일반 JavaScript 형태의 코드로 변환된다 Babel은 JSX를 React.createElement() 호출로 컴파일한다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, '..