REACT26 클래스 컴포넌트와 함수 컴포넌트 (Class Component / Functional Component) 리액트 컴포넌트 리액트의 컴포넌트는 크게 두 종류로 나눌 수 있는데, 클래스로 이루어진 클래스 컴포넌트와 함수로 이루어진 함수 컴포넌트가 있습니다. 둘 중 어떤 방법으로 컴포넌트를 생성하더라도 우리의 리액트 프로젝트는 정상적으로 작동 할 것입니다. 그런데 왜 리액트는 두 가지 방식의 컴포넌트를 모두 사용할까요? 등장 배경 사실 함수 컴포넌트는 처음 리액트가 나올때는 존재하지 않았던 기술입니다. 이전까지의 리액트 컴포넌트들은 클래스 컴포넌트로만 구성할 수 있었고, 함수형으로 작성하는 컴포넌트는 몇 번의 업데이트 이후에야 등장하였으며 안정적으로 사용되기까지 약간의 시간이 더 필요했습니다. 물론 함수 컴포넌트는 클래스 컴포넌트에 비해 훨씬 적은 양의 코드로도 외적으로 동일한 기능을 수행할 수 있었고, 기존의 .. 2022. 5. 3. 리액트 컴포넌트 생명주기 (React Component Life Cycle) 리액트를 공부하며 이번에 리액트를 본격적으로 사용하게 되었습니다. 그동안 리액트 자체를 사용해보긴 했지만 어떻게 사용해야하는지에 대한 고민이나 공부없이 말 그대로 쓰기만 했었습니다. 그래서, 이번 기회에 기초부터 차근차근 공부해보려 합니다. 오늘은 리액트 컴포넌트의 생명주기에 대해 알아보겠습니다. 글을 쓰는 현재 리액트 18버젼이 나왔기 때문에, 17버젼에서 이미 deprecate된 일부 단계들은 다루지 않습니다. 1. componentDidMount 컴포넌트가 마운트(mount)되며 일어나는 단계입니다. 위키백과에서는 마운트(mount)에 대해 "컴퓨터 과학에서 저장 장치에 접근할 수 있는 경로를 디렉터리 구조에 편입시키는 작업을 말한다." 라고 설명합니다. 이처럼 컴포넌트가 처음 실행되면 컴포넌트의 .. 2022. 5. 1. react-canvas-draw 사용법 최근 학교 팀 프로젝트로 온라인 드로잉 웹 게임을 만들었는데, react-canvas-draw라는 라이브러리가 있기에 사용해보았습니다. 라이브러리 깃 저장소에 공식 튜토리얼은 존재했지만 한국어 자료가 거의 없다시피하여 이후에 사용하실 분들을 위해 간단한 사용법을 남겨봅니다. 설치 npm 또는 yarn을 이용해 모듈을 설치해줍니다. npm install react-canvas-draw --save yarn add react-canvas-draw 사용법 import React from "react"; import ReactDOM from "react-dom"; import CanvasDraw from "react-canvas-draw"; ReactDOM.render(, document.getElementBy.. 2021. 12. 26. React CRA시 App.js에 표시되는 빨간 줄 제거하기 React를 사용할때면 많은 분들이 CRA 명령어를 애용합니다. 그런데 CRA 명령으로 생성된 파일에 빨간줄이 죽죽 그어져있다면, 개발자 입장에서는 당황스럽습니다. 자동으로 구성된 파일에 문제가 있을 확률은 극히 낮기 때문에 어디서 오류의 원인을 찾아야할지 막막해지기 일쑤입니다. 문제 상황은 이렇습니다. 자동 생성된 App.js 파일에 빨간 줄들과 함께 갖가지 오류가 표시되었습니다. expression(statement) expected Expecting newline or semicolon Unresolved variable or type className(src, alt, href, target, rel...) Unnecessary semicolon 일단 저 오류들을 모두 무시하고, npm run s.. 2021. 8. 6. A Line Translate : 한줄 번역기를 만들었어요. (크롬 확장 프로그램 개발 과정, Chrome extensions) #1 학기가 시작하고 과제와 자료 조사 및 필기를 하며 영어로 된 자료들을 볼 때가 많은데, 한 두 단어를 몰라서 구글 번역기를 켜고 작은 화면에서 옮겨적는 과정이 상당히 번거로웠습니다. 물론 모니터 하나를 더 쓰면 될 일이지만 들고 다니기엔 여분의 모니터를 휴대하고 다니기에는 부담스러워서... 영단어나 문장을 바로 번역해서 보게 해주는 서비스가 있다면 어떨까 생각해봤습니다. 영어를 보고 이게 무슨 뜻일까? 라고 생각했을때 바로 번역이 된다면 좋겠지만 그런 하이테크까지는 모르고... 그 과정을 최대한 줄일 수만 있다면 그걸로 충분할 것 같았습니다. 어떤 방법으로 번역을 할 수 있을까 고민해보니, 드래그를 했을때 자동으로 컨텍스트가 번역된다면 꽤 멋진 기능이 될 것 같았습니다. 그런데 이런 기능이 작동하려면 프.. 2020. 11. 17. react 프로젝트에 redux 적용하기 #2 지난 react 프로젝트에 redux 적용하기 #1에서는 리덕스가 적용되는 대략적인 구조를 만들었습니다. 그러나 앞으로 우리가 해야할 작업은 이것만으로 충분하지 않았습니다. 오늘은 비동기 작업을 위해 리덕스 청크(redux-thunk)를 이용하여 요청을 처리해보겠습니다. 리덕스 청크란 리덕스 미들웨어의 한 종류입니다. 간단한 동기 작업만이 가능한 리덕스에 비동기 작업이나, 웹 요청, 또는 저장소에 접근하는 복잡한 요청 등을 처리해주는 고마운 친구입니다. 우리는 오늘 이 고마운 친구와 함께 비동기 작업을 수행해 볼 예정입니다. 그럼 시작하겠습니다. 시작 우선 가장 문제가 되는 비동기 작업부터 처리해보겠습니다. 우리가 비동기 요청을 보냈을때의 상태를 구분해보면 세 가지가 있습니다. 1. 요청을 보내지 않았거.. 2020. 10. 2. 이전 1 2 3 4 5 다음
