이번 포스팅에서는 React를 시작해 보겠습니다. React를 시작하기 위해 먼저 몇 가지 프로그램을 설치하고 작업 환경을 구성해야 합니다. 1. 기본 프로그램 설치 Node js 먼저 Node js 공식 사이트에서 LTS버전을 설치해 주세요. 설치 후 node.js Setup파일을 실행시켜 설치를 진행합니다. 설치 후 node -v 명령어를 통해 설치 여부를 확인할 수 있습니다. npm node를 설치했다면 npm이 자동으로 설치됩니다. 터미널에서 npm -v 명령어를 통해 확인할 수 있습니다. React 어플리케이션 설치 CRA로 React어플리케이션을 설치합니다. 다음 두 가지 명령어를 통해 React 어플리케이션을 설치할합니다. 파일 이름을 대문자로 할 경우 오류가 발생하니 소문자로 이름을 지어주..

최근 웹개발의 트렌드는 빠르게 변화하고 있습니다. 그만큼 여러 개발 도구들이 등장하고 발전하고 있는데요, React도 이러한 개발 도구들 중 하나입니다. 어떤 개발 도구나 프레임워크라도 "왜 쓰는지" 혹은 "그 툴의 장점이 무엇인지?"를 알고 쓰는 것이 중요합니다. 이번에는 React를 공부하기에 앞서 왜 React를 써야 하는지 React가 가지는 특징을 중심으로 알아보려고 합니다. 1. React란? 페이스북(현재 메타)에서 개발한 Javascript UI 라이브러리를 말합니다. 2. React의 등장 배경 2000년대 초 Web 2.0과 SPA(Single Page Application)의 등장으로 사용자가 웹페이지에서 정보를 주고받으며 상호작용할 수 있게 되었습니다. 이에따라 많은 웹서비스들이 등..

React 톺아보기 시리즈에서는 React 공식 문서를 바탕으로 기초부터 심화까지의 내용을 정리하도록 하겠습니다. 프로그래밍 공부는 프로젝트에 실전적으로 적용하면서 배우는 Project Based Learning이 정말 중요합니다. 따라서 공식 문서의 틱 택 토, To Do List를 만들어 보면서 React의 주요 내용들을 적용해 보도록 하겠습니다. 참고 자료들 React 공식 문서 리액트의 공식 사이트에 있는 문서입니다. React의 기본부터 심화까지 다룹니다. CRA CRA는 페이스북에서 만든 공식 React 개발용 Boilerplate입니다. 간단히 말해서 React 개발 환경 구축 툴입니다. React를 공부하면서 CRA를 굉장히 많이 사용할 텐데, 이 문서는 CRA에 대한 설명 뿐만 아니라 C..

1. 클린코드의 의의 다른 사람의코드를 수정해야 할 때 작성자만 이해할 수 있고 다른 사람은 무슨 기능을 하는 코드인지 파악하기 어렵다. 흐름파악이 어렵고 도메인 맥락 표현 x 작성자만 알 수 있는 코드 개발할 때 병목, 유지보수시간 오래, 기능추가 불가능한 상태, 성능도 떨어짐 클린코드의 의미 === 유지 보수 시간의 단축 시간은 자원이고 돈이다. 고치는데 더 빠른 시간이 걸릴수록 돈을 아끼는 것이다. 모두 처음엔 클린했다. 하지만 기능을 추가하는 상황이라면 순식간에 들쑥날쑥해질 수 있다. 사실 당연하다. 남이 짠 코드에 내 기능을 추가하는 것이니.... 이미 작성된 코드에 새 기능을 추가한다고 해보자........ .... 코드 ... 하지만 나쁜코드가됨 하나의 목적인 코드가 흩뿌려져 있다. 하나의 ..

React에서 변수의 상태나 Form양식의 데이터들을 관리하다 보면 Hook을 사용할 일이 많다. 이 페이지에서는 useState와 useRef의 차이점을 정리하고자 한다. 둘의 차이점을 알아보기 전에 Hook의 개념을 간단하게 알아볼 필요가 있다. 따라서 Hook에 대해 정리하고 useState와 useRef의 차이점에 대해 정리해 보려고 한다. [목차] React Hook이란? useState와 useRef의 비교 차이점 사용 예시 정리 1. Hook이란? Hook은 리액트의 함수 컴포넌트에서 상태(React state) 와 생명주기 기능( lifeCycle features)을 연결하는 함수이다. 기존에는 Class형 컴포넌트에서만 상태를 관리할 수 있었고 함수형 컴포넌트에서는 상태를 관리할 수 없었..

https://dori-coding.tistory.com/entry/React-%EB%B0%98%EB%B3%B5%EB%AC%B8map%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Component-%EB%B0%98%EB%B3%B5-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0 [React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기 지난 게시물을 통해 App.js로 가져온 데이터를 이용해 컴포넌트(Component) 안에 출력시켜 보도록 하겠습니다. [React] Export(내보내기) 및 Import(가져오기) 1. Export (내보내기) 더보기 ex..

웹어플리케이션을 개발하다 보면 라우팅을 사용하는 경우가 많이 생긴다. Routing을 지원하는 라이브러리가 많이 있으나 React Router 라이브러리가 가장 많이 사용된다. 이번 페이지에서는 React의 Router에 대해 알아보고 사용법을 정리하고자 한다. [목차] Router 개념 React Router 사용하기 React Router 특징 1. Router 개념 Routing이란? 먼저 Routing의 개념부터 살펴보면 Route는 영어로 "경로를 정하다"라는 뜻을 가진다. 웹에서 Routing이란 "사용자가 요청한 URL에 따라 입력받은 URL에 맞는 페이지를 보여주는 것"이다. React의 Router 위와 비슷하게 React에서도 Router란 " 사용자가 입력한 주소를 감지하고 입력받은 ..

https://velog.io/@seob/React-js-%EC%A0%95%EA%B7%9C%EC%8B%9D%EC%9C%BC%EB%A1%9C-%ED%95%B8%EB%93%9C%ED%8F%B0-%EB%B2%88%ED%98%B8-input-%EB%A7%8C%EB%93%A4%EA%B8%B0 velog velog.io