React 기초

React

 React는 front-end 코드를 구조화에 중점을 둔 라이브러리입니다. JSX를 이용하여 JS를 확장한 문법을 사용하며, 작은 단위의 컴포넌트를 재사용하는데 최적화 되어 있습니다. Angular에 비하여, 상대적으로 단순합니다. 

 

React 기본 구조

 React 기본에 대해서는 이곳에서 잘 알려주므로 여기 참고하세요

 https://react.vlpt.us/basic/

 

함수형 컴포넌트

 컴포넌트는 연관있는 함수 변수등을 모아놓은 객체인데, 가장 비슷한 것은 클래스입니다. 함수형 컴포넌트는 클래스 보다 짧고 직관적인 코드 작성이 가능하다고 합니다(저는 클래스가 익숙해서인지 클래스가 편하든데). 

 

HOOK

 함수형 컴포넌트의 가장 큰 단점이 생명주기를 관리하는 함수가 없다는 점입니다. 생명주기란 예를 들어 클래스의 생성자는 클래스가 객체로 인스턴스화 될때 호출되는 함수로, 생성될때 필요한 변수 초기화 등의 작업을 하면 되는 것입니다. 그래서 React도 생명주기 관리가 필요하다고 생각해서 Hooks라는 기능을 가지고 생명주기 비슷한 관리가 가능합니다.

대표적인게 useEffect로써 화면 랜더링 직후에 호출되는 함수입니다.

 

HTM DOM 객체 가져오기

 ref를 이용하여 가져와야 화는데, 실제 element는 current 변수에 담겨져 있습니다.

 예시 : const el_div = this.myRef.current;