거니의 velog

* 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.* DOM 요소의 id * 특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 우리가 다루는 리액트 프로젝트에서 사용하는 public/index.html 파일에도 id가 root인 div 요소가 있다. * 그리고 src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다.const root = ReactDOM.createRoot(document.getElementById('root'));* 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 ..

2. 예제로 이벤트 핸들링 익히기 * 그럼 예제로 이벤트 핸들링을 익혀 보자. 앞으로 실습할 각 단계는 다음과 같다. (1) 컴포넌트 생성 및 불러오기 [1] 컴포넌트 생성 * 실습을 시작하기에 앞서 새 컴포넌트를 만들어 보자. src 디렉터리 내부에 EventPractice.js 파일을 만들자. 그리고 컴포넌트 초기 코드(rcc)를 작성하자. import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 ); } } export default EventPractice; [2] App.js에서 EventPractice 렌더링 * App 컴포넌트에서 EventPractice ..

* 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. HTML을 사용한 적이 있다면 매우 익숙할 것이다. HTML에서 DOM 요소에 이벤트를 설정하는 방법을 한번 살펴보자.* 다음 코드를 HTML 파일로 저장하여(프로젝트 디렉터리 외부에 저장하자) 웹 브라우저로 열어보거나, JSBin에서 코드를 입력하여 테스트해 보자. 여기서는 JSBin을 사용해 보자.https://jsbin.com/?html,output JS BinSample of the bin:jsbin.com..

4. state * 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 MyComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. * 리액트에서는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다. (1)..

3. props * props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App 컴포넌트가 부모 컴포넌트이다)에서 설정할 수 있다. (1) JSX 내부에서 props 렌더링 * 우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해 보자. props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때 이전에 배웠던 것처럼 JSX 내부에서 { } 기호로 감싸 주면 된다. import React from 'react'; const MyComponent = (props) => { return 안녕하세요, 제..

* 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있다. 예를 들어 뒤에서 만들어 볼 일정 관리 애플리케이션을 미리 살펴보자. * 위 프로젝트는 총 네 가지 컴포넌트를 사용하여 구성했다. 먼저 전체적인 틀을 잡아 주는 TodoTemplate 컴포넌트이다. 이 컴포넌트는 현재 화면의 중앙에 있는 사각형 레이아웃의 역할을 하고 있다. 그리고 새로운 항목을 추가할 수 있는 TodoInput 컴포넌트이다. 위 화면에서는 검정색 영역이 바로 TodoInput이다. 그리고 할 일 항목을 여러 개 보여 주는 TodoList 컴포넌트이다. 마지막으로 TodoList에서 각 항목을 보여 주기 위해 사용되는 TodoItem 컴포넌트이다. * 컴포넌트의 기..

5. ESLint와 Prettier 적용하기 (1) ESLint * ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구이다. 해당 도구는 이전에 설치했으며, 이 절에서는 사용하는 방법을 간략하게 알아보자. 혹 아직 설치하지 않았다면 VS Code 마켓플레이스에서 ESLint와 Prettier를 설치하자. * ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다. * 예를 들어 주석을 잘못 입력해서 입력한 내용이 화면에 그대로 나오고 있는 상황이라면 다음과 같이 에디터에서 확인할 수 있다. * 에디터 하단에 뜨는 문제 탭은 VS Code의 상단 메뉴에서 보기 > 문제를 클릭하여 열 수 있다. * 지금 에디터..

(5) undefined를 렌더링하지 않기 * 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다. 예를 들어 다음과 같은 코드는 오류를 발생시킨다. import React from "react"; import './App.css'; function App() { const name = undefined; return name; } export default App; * 어떤 값이 undefined일 수도 있다면, OR( || ) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다. import React from "react"; import './App.css'; function App() { co..

4. JSX 문법 * JSX는 정말 편리한 문법이지만, 올바르게 사용하려면 몇 가지 규칙을 준수해야 한다. (1) 감싸인 요소 * 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 한번 App.js 파일의 컴포넌트 함수 내부를 지우고 다음과 같이 작성해 보자. 상단에 있는 SVG와 CSS를 import하는 코드도 지워 보자. import React from 'react'; function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; * 이런 형태의 코드는 제대로 작동하지 않는다. 코드를 저장한 후 웹 브라우저나 개발 서버를 실행했던 터미널을 열어 보자. 다음 오류가 나타날 것이다. * 요소 여러 개가 부모 요소 하나에 의하여 ..

1. 코드 이해하기 * 앞에서 만든 프로젝트를 VS Code로 열어 보자. VS Code에서 파일 > 열기 메뉴를 선택하여 create-react-app으로 만든 hello-react 디렉터리를 연다. * 그 다음에는 src/App.js 파일을 열어 보자. import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( * React.StrictMode는 무엇인가? - React.StrictMode는 리액트 프로젝트에서 리액트 레거시 기능들을 사용하지 못하게 하는 기능이다. 이를 사용하면 문자열 ref, componentWillMount 등 나중에는 완전히 사라지게 될 옛날 기능을 사..