Front-End

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용합니다. // DOM 요소의 id 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. ref(reference의 줄임말) 개념입니다. 리액트 안에서도 id를 사용할 수 있지만, 특수한 경우가 아니면 권장하지 않습니다. ref는 전역으로 작동하지 않고 컴포넌트 내부에서만 작동해서 중복 id 값처럼 오류가 일어나지 않습니다. - 1. ref는 어떤 상황에서 사용해야 할까? - 특정 DOM에 작업을 할 때..

자바스크립트에서도 이벤트가 있었는데, 리액트에서도 이벤트 핸들링이 있다. 한번 알아보자! 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행합니다. HTML을 사용한 적이 있다면 매우 익술할 것입니다!! HTML에서 DOM요소에 이벤트를 설정하는 방법을 다시 살펴보자. - 1. 리액트의 이벤트 시스템 - 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다. // Say.js import { useState } from 'react';..

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있습니다. 일단 클래스형 컴포넌트에 대해 살펴본뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다. 1. 클래스형 컴포넌트 App 컴포넌트는 함수 컴포넌트며, 코드가 다음과 같다. // App.js import './App.css'; function App() { const name = '리액트'; return {name}; } export default App; 컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수 컴포넌트고, 또 하나는 클래스형 컴포넌트입니다. 클래스형 컴포..

1. JSX 시작 전에 코드 먼저 이해해 보고 가자. 리액트를 처음하게 되면 코드가 낯설 수 있는데, 하나씩 이해해 보자. import logo from "./logo.svg"; import "./App.css"; 여기 import 구문이 사용되었는데, 이는 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있다. 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능입니다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에는 지원하는 기능입니다. 이러한 기능을 브라우저에서도 사용하기 위해 번들러를 사용합니다. 번들은 묶는다는 뜻입니다. 즉, 파일을 묶듯이 연..