바닥코딩

라우팅? 웹 애플리케이션 에서는 URL을 통해 요청을 보내고 받습니다. URL에 따른 어떠한 페이지를 보여줄 수도 있고, 어떠한 동작을 수행할수도 있습니다. 웹에서의 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 예를 들어 게시판 서비스를 제공하는 웹 사이트가 있다고 가정해 봤을 때 해당 사이트에서는 글목록, 글쓰기 , 글수정, 글상세보기 ... 등등의 여러 페이지가 필요합니다. 이런 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해하며 프로젝트를 관리하기 위해 필요한 시스템이 바로 라우팅 시스템 입니다 리액트에서 대중적으로 많이 사용하는 라우팅 서비스는 크게 두가지가 있습니다. 리액트 라우터 : 가장 오래됐고, 가장 많이 사용..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태관리, 렌더링 직후 작업을 설정하는 기존에 되지 않았던 기능들을 지원하게 됐습니다. useState 가장 기본적이며 이미 함수 컴포넌트에서 여러번 사용해 봤던 hook입니다. 간단하게 코드로 살펴보자면 import React, { useState } from 'react' const Counter = () => { const [value, setValue] = useState(0); return ( 현재 값은 {value} 입니다. setValue(value +1)}>+ setValue(value -1)}>- ) }; export default Counter; 위 코드르 생성한 코드는 브라우저 상에서 위와 같은 컴포넌트를 생성하..

라이프사이클 메서드 리액트에는 총 9가지의 라이프사이클 메서드가 존재합니다. 또한 이는 크게 3가지, 마운트 / 업데이트 / 언마운트 카테고리로 나뉩니다 . 첫번째 마운트(Mount) 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 메서드는 다음과 같습니다. 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드(생성자 함수) getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 먼저 코드를 통해 마운트 과정에서 호출되는 메서드를 알..

웹 개발에서의 event는 웹 브라우저에서 DOM 요소들과 상호 작용하는것을 의미합니다. 다른 포스팅 에서 button클릭이라던가, 키보드 입력, 마우스 커서 이동 등등 많은 이벤트 요소들이 있습니다. 이번 포스트에서는 과연 리액트에서는 이러한 이벤트 핸들링을 어떻게 처리하는지에 대해 다뤄보겠습니다. 리액트에서의 이벤트 핸들링 일반적으로 웹개발을 해보신 분이라면 HTML에 기본 이벤트 인터페이스들에 익숙할 것입니다 리액트에서는 해당 이벤트 핸들링 방법이 HTML과 동일하기 때문에 문법을 숙지하는 것은 어렵지 않으나 주의해야할 사항들이 몇가지 존재합니다. 이벤트 이름은 카멜 표기법으로 작성한다 ex) onclick ->onClick , onkeydown-> onKeyDown 이벤트에 실행할 자바스크립트 코..

state state 는 리액트 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 props는 이전 포스팅에서 자세히 다루어 봤는데, 이는 사용되는 과정에서 부모 컴포넌트에서 설정하는 값이 지정이 되며 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. 즉 props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 합니다. 하지만 state는 컴포넌트 내부에서 직접 값을 변경하는 것이 가능합니다. state의 종류로는 클래스형 컴포넌트의 state와 함수형 컴포넌트의 useState() 라는 함수가 있습니다 예제를 통해 이 두 가지에 대해 알아보겠습니다. 클래스형 컴포넌트의 state import React, { Component } from 'react'; import PropTypes from ..

모듈 생성 및 import/export 먼저 컴포넌트를 생성해 이를 내보내고(export), 불러오는(import) 작업을 수행해 보겠습니다. 저는 일단 기본 리액트 프로젝트 src 폴더에 > MyComponent라는 폴더를 생성했습니다 그리고 그 내부 동일 명칭의 js 파일을 생성해보았습니다. const style = { color : 'red', } const MyComponent = () => { return new component } export default MyComponent; 해당 JS 의 내용은 위와 같은데 위 내용에서는 가장 아래 줄 export default MyComponent를 유의깊게 확인해 보아야 합니다. 이 코든는 해당 파일을 다른 코드에서 import 할 때 MyCompo..

컴포넌트? 컴포넌트라는 용어는 독립적인 기능을 수행하는 단위 모듈을 의미합니다. 리액트를 사용하는 개발자들에게 있어 애플리케이션을 설계할 때 사용자가 볼 수 있는 여러가지 컴포넌트들을 제공하는데 , 이는 애플리케이션 개발에서 재사용성을 높이고 유지보수를 용이하게 하기 위한 기술입니다. 함수형/클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두가지로 나누어지 집니다. 하나는 함수형 컴포넌트, 하나는 클래스형 컴포넌트 입니다. 이전 포스팅에서 다루었던 내용중 코드 하나를 인용하자면 function App() { const v_react = "React"; return ( {v_react} Test ); } 바로 위와 같은 App 함수 같은 경우가 함수형 컴포넌트 입니다 두번째로는 클래스형 컴포넌트가 있는데 위 ..

JSX란 리액트 프로젝트 생성과 node/npm 설치 과정은 생략하겠습니다. JSX는 자바스크립트의 확장 문법이며 XML 과 굉장히 유사합니다. 먼저 JSX 코드 순서부터 확인해 보면 import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ import './App.css'; function App() { return ( React Test ); } export default App; 이렇게 생긴 JSX 형태를 띄고 있습니다. 이러한 코드는 실제로는 다음과 같이 변화 되어 사용 됩니다 function App(){ return React.createElement("div", null, ' React Test'); } 만약 새로 렌더링을 할 때마다 위 코드..