탐구소년

이제 state에 대해 알아보도록 하겠습니다. state는 동적 데이터를 다룰 때 사용합니다. 동적 데이터란 말 그대로 변경 가능한 데이터를 의미합니다. 컴포넌트를 자바스크립트 객체라고 했는데, 객체의 구성 요소 중 일부의 개수가 바뀐다던지, 속성이 바뀌는 상황을 다룰 수 있도록 해 주는 것이 바로 state인 것입니다. state는 함수형 컴포넌트에서는 지원되지 않는 개념입니다. 따라서 이제부터는 클래스형 컴포넌트를 다루어야 합니다. 클래스형 컴포넌트의 작성을 위해서는 기본적으로 다음과 같은 형태로 시작해야 합니다. 1 2 3 4 5 6 7 8 import React from 'react'; import './App.css'; class App extends React.Component{ } expor..

css-in-js css-in-js는 CSS 코드를 자바스크립트 파일 안에서 작성하는 방식을 의미합니다. CSS 코드가 자바스크립트 안에서 관리되기 때문에 공통되는 CSS 코드를 변수로 관리할 수 있습니다. 또한 동적으로 CSS 코드를 작성하기도 쉽습니다. css-in-js를 지원하는 패키지 중에서는 styled-components가 간편하고 인지도가 높은 편에 속합니다. styled-components 위 명령어로 styled-components를 설치한 다음, Box.js라는 이름의 파일을 만들어 함수형 컴포넌트를 만들겠습니다. 그리고 거기에는 스타일도 적용해주도록 하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React from 'react'; import st..

*props의 역할을 안다고 가정하고 진행합니다. 개요 컴포넌트의 props를 다룰 때에는 많은 경우 어떤 데이터 타입의 값이 전달될지를 미리 정하고 다루게 됩니다. 그런데 만일 우리가 정의한 props의 값이 컴포넌트에 제대로 전달되지 않으면 어떻게 해야 할까요? 예를 들어 다음과 같은 컴포넌트가 있다고 하겠습니다. 1 2 3 function Food(props){ return {`맛있는 ${props.food}`} } 이 컴포넌트는 누가 봐도 food라는 문자열 타입의 데이터가 props로 전달되는 것이 마땅해 보이는 컴포넌트입니다. 그러나 여기에 숫자 데이터를 전달하는 것도 충분히 가능한 일입니다. 여기에는 아무런 제한 사항도 없기 때문입니다. 1 2 3 4 5 6 7 function App() {..

자바스크립트의 배열 객체의 메소드 중에는 map()이라는 메소드가 존재합니다. map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다. map() 메소드의 기본형은 다음과 같습니다(출처:MDN). map() 메소드의 인자로는 배열의 각 요소를 처리할 콜백함수가 전달됩니다. 여기에서 콜백함수의 인자는 최대 4가지가 가능하지만, 주로 현재의 값(currentValue)과 인덱스 번호(index)가 많이 사용됩니다. 간단한 예제를 보겠습니다. 1 2 3 4 5 const animal = ["Rabbit", "Cat", "Dog"] animal.map(function(current, index){ console.log(current, index) })..

props(속성) props는 컴포넌트에 전달하는 데이터를 의미합니다. 자바스크립트 함수의 매개변수라는 개념을 알고 계실텐데, 컴포넌트의 props 또한 매개변수와 비슷한 역할을 합니다. 전달되어지는 값에 따라서 결과의 차이를 만들어낼 수가 있고, 그로 인해 효율적인 컴포넌트 재사용이 가능해집니다. 컴포넌트 여러 개 사용하기 다음과 같은 구조를 만들고, App.js와 Book.js를 각각 작성해주겠습니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import './App.css'; import Book from './Book'; function App() { return ( ); } export default App; B..

리액트 컴포넌트 리액트에서는 웹문서를 구성하는 각 부분(요소)을 컴포넌트(componenet)라고 부릅니다. 리액트로 사용자 인터페이스를 만들 때는 엘리먼트를 어떻게 재사용 가능한 조각으로 나눌 것인지를 고려하는 것이 좋습니다. JSX 컴포넌트는 자바스크립트와 HTML을 조합한 문법입니다. 두 언어를 조합한 문법이므로 초반의 낯선 느낌만 잘 넘기고 나면 어렵지 않게 학습을 진행할 수 있는 문법입니다. 아래에서 예제를 통해 JSX를 이용한 컴포넌트 작성을 진행해보도록 하겠습니다. 예제 프로젝트 구조 create-react-app 명렁어를 통해 프로젝트 폴더를 먼저 생성하고, 코드를 수정하여 아무 기능도 없는 앱으로 만드는 것이 먼저입니다(여기에 대한 내용은 글에서는 생략하겠습니다). 그런 다음 src 폴더..

create-react-app 수정하기 CRA가 만든 리액트 앱의 구조는 단지 구조일 뿐이므로, 사용자가 원하는 형태의 앱을 만들기 위해서는 많은 부분의 수정이 필요합니다. 여기에서는 리액트 앱을 자동 생성된 상태에서 아무 기능도 없는 상태로 수정하는 방법을 보도록 하겠습니다. 먼저 기본적으로 완성되어있는 구조를 보겠습니다. public을 먼저 살펴보겠습니다. public에는 클라이언트 측에 제공되는 요소들이 주로 자리하고 있습니다. 여기에서 현재 주목할 것은 favicon.ico와 index.html 정도입니다. favicon.ico는 브라우저의 탭에 웹문서의 타이틀과 함께 표시되는 작은 이미지입니다. index.html은 웹문서를 표시할 수 있는 기본 내용만이 작성되어 있는데, 앱 동작시 자바스크립트..

create-react-app(CRA)이란? CRA는 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어입니다. 특정 환경의 개발을 바로 진행할 수 있도록 만든 기초 환경을 통틀어 보일러 플레이트(boiler plate)라고 부르기도 하는데, CRA는 그러한 보일러 플레이트의 일종입니다. 사용자는 CRA를 통해 훨씬 빠르고 간편하게 리액트 어플리케이션을 개발할 수 있습니다. create-react-app 시작하기 CRA를 시작하기에 앞서 확인해야할 것은, PC에 npm(노드)이 정상적으로 설치되어 있는지 여부입니다. 명령 프롬프트를 열고 위의 명령어를 실행하면 PC에 설치된 npm의 버전이 나타나게 됩니다. 이때 버전이 나타나지 않으면 설치가 제..

함수형 컴포넌트 함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 this가 없습니다. 함수형 컴포넌트는 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수입니다. 컴포넌트 구조를 단순하게 유지하고자 할 때에는 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 편이 좋습니다. 아래는 함수형 컴포넌트를 사용한 예제 코드인데, 이 글의 앞선 글에서 사용했던 예제를 거의 재활용하다시피 하는 예제이므로 앞선 글을 참고하시면 비교적 편하실 것입니다. 이전 글 => https://penguingoon.tistory.com/214 React 컴포넌트 만들기 | React.Component React.Component 최신 자바스크립트에서는 객체를 만..

React.Component 최신 자바스크립트에서는 객체를 만들기 위한 설계도의 개념인 class가 추가되었습니다. 그리고 리액트를 사용해 컴포넌트를 새로 만들 때는 React.Component라는 클래스를 기반으로 생성하는 것이 가능합니다. 아래는 class 기반의 컴포넌트를 적용한 예제입니다. 이 글 이전의 글에서 사용했던 예제와 거의 흡사합니다. 프로젝트 구조 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 React Simple Example sample-class-component.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class nameList extends React.Com..