반응형

컴포넌트 3

React 첫 컴포넌트 만들기

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

IT 2023.08.14

[영어로 배우는 React] 4. 컴포넌트와 Props

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

IT 2022.04.07

[영어로 배우는 React]1. 그래서 React가 뭔데?

영어공부와 학습을 병행해 보려고 합니다. React를 영문으로 공부해 보는 거죠. 쉽진 않겠지만 천천히 해보겠습니다. 공부할 사이트는 React 공식 사이트입니다. 공식 사이트의 문서로 공부하면 좋은 점이 있습니다. 첫째로, 그것이 곧 법이 입니다. 다른데 문의할 필요가 없죠. 둘째, 자료가 최신입니다. 사이트는 이렇게 생겼습니다. react.com으로 접속해 보면 됩니다. 오늘은 먼저 공식 사이트에서는 react를 어떻게 설명해 놨는지 보도록 하겠습니다. 슬로건이 제일 먼저 보이네요. A JavaScript library for building user interfaces 'UI를 만들 수 있는 자바스크립트 라이브러리'라고 돼 있네요. 영어 초보라 해석이 매끄럽진 않습니다. 이해를... 모듈, 패키지,..

IT 2022.03.08
반응형