소소한 기록

컴포넌트라는 말이 조금 어렵게 느껴질지 모르겠습니다. 구성요소, 부품, 레고블록 등의 여러 해석 중에 '부품'이라는 말을 쓰면 좋을 것 같습니다. 부품들을 조립해서 물건을 만드는 것처럼, 컴포넌트를 조립해서 프로그램을 완성할 것이기 때문이죠. 리액트에서 사용하는 컴포넌트는 HTML로 대체되는 부품입니다. javascript를 사용해서 부품 기능을 만들고, CSS를 이용해서 부품을 예쁘게 만듭니다. 잘 만든 부품들을 조립해서 최종결과물을 만듭니다. 자동차를 만들 때 엔진, 에어컨, 바퀴등을 각각 만들어서 하나로 조립하는 걸 생각하시면 됩니다. 다만 실제 자동차 조립과 다른 점은 실제 자동차는 바퀴를 네 개 만들어야 하지만, 프로그래밍에서는 하나의 바퀴 컴포넌트를 만들어서 무한대의 바퀴를 만들어 쓸 수 있습..

공식 페이지 : https://reactjs.org/docs/state-and-lifecycle.html 이번장에서는 컴포넌트 상태와 생명주기에 대해 알아보겠습니다. 이전장에서 살펴봤던 똑딱 시계 예에서 UI를 업데이트할 때 root.render()를 사용했었습니다. const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이렇게 사용했었습니다. 이번 장에서는 똑딱 시계를 재사용 가능하고, ..

공식 페이지 : https://reactjs.org/docs/components-and-props.html 컴포넌트는 UI를 독립적이고, 재사용 가능한 부분으로 분리할 수 있게 해 주고, 각 부분을 독립적으로 생각할 수 있게 해 줍니다. 이 페이지에서는 컴포넌트 개념에 대해 설명합니다. 개념상 컴포넌트는 자바스크립트 함수입니다. 그 함수는 임의의 입력값을 받아들이고('props'라고 부르는), 스크린에 어떻게 나타날지를 설명하는 리액트 앨리먼트를 리턴합니다. 1. 함수와 클래스 컴포넌트 컴포넌트를 선언하는 가장 쉬운 방법은 자바스크립트 함수를 쓰는 것입니다. function Welcome(props) { return Hello, {props.name}; } 위 함수는 단일 props를 함수 인자로 받아들..