react.js

Windows 10에서 개발하는 것으로 상정합니다(하루빨리 Mac OS로 갈아타서 Mac OS 설치법도 추가하리라)Node.jsYarnVS Code(Windows only) Git BashNode.js 공식 홈페이지에 접속하여 좌측의 LTS 버전을 설치합니다.Yarn

컴포넌트, 컴포넌트 하는데, 이 컴포넌트는 과연 무엇일까요?리액트 프로젝트로 만들어진 애플리케이션의 모든 요소들은 '컴포넌트'로 만들어집니다. 사용자의 눈에 보이는 버튼, 입력창, 메뉴탭, 영역 등등 모두가 컴포넌트이며, 리액트 앱은 여러 개의 컴포넌트들이 조합된 것이

JSX 리액트 프로젝트를 갓 생성했을 때, App.js에는 App 컴포넌트가 아래와 같이 작성되어 있을 것입니다. 뭔가 재밌는 형식이지 않나요? 함수형 컴포넌트인 App 컴포넌트가 return하는 내용을 보세요. 웹 브라우저가 이 App 컴포넌트를 렌더링(렌더링이

1\. 컴포넌트 만들어 보기에서 우리는 컴포넌트를 만드는 법을 살펴 보았습니다. 컴포넌트를 사용하여 원하는 데이터를 웹 페이지 화면에 그릴 수 있습니다. 그런데, 많은 경우에, 컴포넌트는 개발자에 의해 미리 정해진 데이터를 단순히 그려주는 정도가 아니라, 사용자가 입력

컴포넌트에서 보여줘야 하는 값이 사용자 interaction에 따라 동적으로 달라지는 경우가 있습니다. 리액트에서는 '상태 관리'라는 방법을 통해 이를 구현하는데요. 가변적인 데이터를 '상태(state)'라고 정의하고, 이 '상태'가 변하는대로 뷰를 업데이트 합니다.

<Input /> 태그는 기본적으로 텍스트를 입력하는 공간을 제공합니다. 이번 장에서는 지난 장에서 언급한 useState() 함수를 사용하여, <Input /> 태그가 하나일 때와 두 개 이상일 때 각각 상태를 어떻게 관리하는지에 대해 알아보겠습니다. 단순