탐구소년

함수형 컴포넌트 함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 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..

React 소개 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 2013년에 페이스북에서 만들었습니다. 리액트를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있습니다. 그리고 이러한 코드를 렌더링하여 웹문서 인터페이스를 만들게 됩니다. 리액트는 점진적으로 적용할 수 있도록 설계되어 있어 학습이 용이합니다. 다만 다른 낯선 기술을 배울 때와 마찬가지로 러닝 커브(learning curve)가 존재하므로, 초기 진입장벽을 잘 넘기는 것이 중요합니다. React 동작 원리 HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고..