탐구소년

리액트 컴포넌트에는 생명주기가 있습니다. 모든 리액트 컴포넌트는 초기화, 업데이트, 소멸의 세 단계를 거치게 되는데, 이러한 단계를 컴포넌트의 생명주기라고 합니다. 그리고 컴포넌트에는 생명주기를 다룰 수 있도록 다양한 생명주기 함수가 존재합니다. 여기에서는 자주 사용하게 될 몇 가지에 대해서만 자세히 알아보도록 하겠습니다. (* 클래스 내부에 위치한 함수를 메소드라 합니다) constructor(props) constructor는 클래스형 컴포넌트가 생성될 때 호출됩니다. props 매개변수는 컴포넌트의 속성값이 적용된 상태로 호출됩니다. constructor 메소드 내부에서 반드시 super() 함수를 호출해야 합니다(규칙이니 그대로 사용하기만 하면 됩니다). 1 2 3 4 5 6 7 8 9 10 11..

함수형 컴포넌트 함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 this가 없습니다. 함수형 컴포넌트는 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수입니다. 컴포넌트 구조를 단순하게 유지하고자 할 때에는 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 편이 좋습니다. 아래는 함수형 컴포넌트를 사용한 예제 코드인데, 이 글의 앞선 글에서 사용했던 예제를 거의 재활용하다시피 하는 예제이므로 앞선 글을 참고하시면 비교적 편하실 것입니다. 이전 글 => https://penguingoon.tistory.com/214 React 컴포넌트 만들기 | React.Component React.Component 최신 자바스크립트에서는 객체를 만..

React.Component 최신 자바스크립트에서는 객체를 만들기 위한 설계도의 개념인 class가 추가되었습니다. 그리고 리액트를 사용해 컴포넌트를 새로 만들 때는 React.Component라는 클래스를 기반으로 생성하는 것이 가능합니다. 아래는 class 기반의 컴포넌트를 적용한 예제입니다. 이 글 이전의 글에서 사용했던 예제와 거의 흡사합니다. 프로젝트 구조 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 React Simple Example sample-class-component.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class nameList extends React.Com..