거니의 velog

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 등 나중에는 완전히 사라지게 될 옛날 기능을 사..

* 이제 리액트를 본격적으로 공부해 보자. 이 절에서는 리액트 프로젝트를 생성하는 사전 준비 작업을 수행하고 나서 첫 리액트 프로젝트를 만들어 볼 것이다. (1) Node.js와 npm * 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 한다. Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다. 2009년 Node.js를 출시한 이후 자바스크립트는 웹 브라우저 영역 외에 웹 서버는 물론, 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 엄청나게 활약할 수 있게 되었다. * 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, ..

(1) Virtual DOM * 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. [1] DOM이란? * Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야 한다. DOM은 Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. * 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. * 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데, 이 DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 ..

* 최근 몇 년간 전 세계 개발자는 자바스크립트에 뜨겁게 열광하고 있다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 한다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청나게 활약하고 있다. * 예를 들어 슬랙(Slack), 아톰(Atom), VS Code 등 유명한 데스크톱 애플리케이션을 일렉트론(Electron)(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 개발했다. 모바일 애플리케이션도 마찬가지이다. 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크(Ionic, Titanium, NativeScr..