탐구소년

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() {..

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..

React 소개 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 2013년에 페이스북에서 만들었습니다. 리액트를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있습니다. 그리고 이러한 코드를 렌더링하여 웹문서 인터페이스를 만들게 됩니다. 리액트는 점진적으로 적용할 수 있도록 설계되어 있어 학습이 용이합니다. 다만 다른 낯선 기술을 배울 때와 마찬가지로 러닝 커브(learning curve)가 존재하므로, 초기 진입장벽을 잘 넘기는 것이 중요합니다. React 동작 원리 HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고..