사용자들의 다양한 입력을 받아보고, State로 관리해 볼 것이다. [input 태그를 State로 관리하는 방법] const [name, setName] = useState(“”); 사용자가 input에 입력한 값을 만들 State를 만들어준다. 사용자들이 input 태그에 입력하는 메세지들을 name State를 이용해서 관리한다. input 태그의 value 속성으로 name 값을 넣어준다. 그러면 value가 빈문자열을 가지는 값으로 고정돼서 뭘 입력해도 input 창에 아무것도 들어가지 않는다. *input의 value 속성은 input 요소의 초기값을 명시하는 것이다 { setName(e.target.value) }} /> 입력된 값을 실시간으로 name State에 저장해 주기 위해서, in..

State : 어떤 사물의 모양이나 형편, 계속해서 변화하는 값 리액트의 컴포넌트들도 상태를 갖는다. 여러 개 가질 수 있다. 상태가 변하게 되면, 리액트 컴포넌트도 변화한 상태에 따라 모습이 바뀌게 된다. 즉 리액트 컴포넌트는 상태가 바뀌면 다시 렌더링 된다. 리액트에서는 화면을 업데이트하는 기능들을 대부분, 상태 즉 State 기능을 통해 구현하게 된다. import { useState } from 'react' export default function Body(){ const [light, setLight] = useState("OFF") return( ) } State를 만드려면 import {useState} from “react”; 를 입력해서 리액트 라이브러리로부터 useState라는 메서..

Event : 웹에서 일어나는 버튼 클릭, 메세지 입력, 스크롤 등등의 모든 행동 Handling : 다루다, 취급하다, 처리하다 Event Handling : 이벤트가 발생했을 때 그를 처리하는 것. 즉 버튼을 클릭했을 때 경고창을 띄워주는 것처럼. 웹에서 발생하는 사용자의 행동을 처리하는 것을 말한다. 리액트에서의 이벤트 핸들링은 바닐라JS에서의 이벤트 핸들링과 거의 비슷하다. export default function Button({color,text, children}){ return { alert("버튼을 클릭했습니다.") }} style={{ backgroundColor: color }} className='button'> {children} } onClick 속성을 추가하고, 버튼을 클릭하면..

props란 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 수 있는 기능을 말한다. 만약 여러 군데 반복적으로 사용될 버튼을 만들려면 컴포넌트를 만드는 게 좋다 [Button.jsx] import './Button.css'; export default function Button(){ return 클릭 } 버튼이 자주 사용될 것 같은 요소라서 컴포넌트로 만들어두긴 했지만, 문제는 버튼 안에 표시되는 “클릭”을 버튼마다 다르게 할 수가 없다는 점이다. 모양은 똑같지만 나타나는 글자를 다르게 하려면 자식 컴포넌트에게 데이터를 보내주는 기능인 props를 사용해야한다. [Body.jsx] import Button from './Button' export default function Body(){ return..

vite를 이용해 생성한 리액트 앱에서는 오류가 발생했을 때, 화면에 오류의 원인 또는 발생한 것으로 짐작되는 곳을 자동으로 짚어준다. 어떤 함수가 HTML 태그들을 return하고 있다면 리액트에서는 ‘컴포넌트’라고 부른다. 자바스크립트 함수를 만들고 해당 함수가 HTML 태그를 return 하게 만들어주면 그 함수는 리액트의 ‘컴포넌트’가 되는 것이다. 이렇게 함수로 만드는 컴포넌트들을 ‘함수 컴포넌트’ 라고 한다. 클래스를 이용해 컴포넌트를 만드는 ‘클래스 컴포넌트’도 있으나, 함수 컴포넌트에 비해 작성해야 되는 코드의 양이 훨씬 많다. 그래서 빠르고 간결하게 만들 수 있는 함수 컴포넌트를 사용한다. 어떤 컴포넌트를 다른 컴포넌트의 자식 컴포넌트로 배치할 때 HTML 태그를 쓰듯, 컴포넌트의 이름을..

리액트는 웹 서비스를 만드는 기술이지만 다양한 상호작용을 제공하기에, 마치 웹이 아니라 어플리케이션 같아서 React App이라 부름 [React App 만드는 3단계] 1. npm init을 통해 Node.js 패키지 생성 2. npm install react를 통해 리액트 설치 3. 기타 도구들 설치하고 설정 하지만 3번처럼 처음부터 하나하나 세팅하려면 사전에 공부해야하는 도구(웹팩, 바벨 등)들이 너무 많다. 즉 입문자들에게 권장하기 어렵다 그래서 vite3를 이용한다. vite3은 명령어 한 번으로 잘 세팅된 리액트 앱을 자동으로 생성해 준다. [리액트 앱 생성] 터미널에 npm create vite@latest 입력한다. vite라는 도구를 이용해서 새로운 리액트앱을 생성하는 명령어이다. + v..