키다리 개발자

SPA SPA는 Single Page Application의 약어입니다. 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 요즘 웹에서는 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생 할 수 있습니다. 따라서 기존 html의 페이지 전환이 일어날 때마다 바뀌지 않는 부분까지 서버에서 새로 불러와서 보여 주어야 한다면 상당히 비효율 적입니다. 그래서 리액트를 사용하여 필요한 부분만 자바스크립트를 사용하여 업데이트해줍니다. 만약에 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 불러와 애플리케이션으로 사용할 수도 있습니다. Route 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. 리액트 라우팅..

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다. 확장자는 .module.css 파일로 저장하기만 하면 CSS Module이 적용됩니다. className이 하이픈(-)이 포함되어 있는 경우 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react' import style from './style.module.css'; const Home = () => { return( 하이픈 포함되어 배열로 스타일링 ); }; export default Home; CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 ..

React에서 모든 컴포넌트에 state가 있어야 하는 것은 아니다. 어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. state가 없을때에도 class형 컴포넌트를 사용해도 된다. 하지만 React에서 함수형 컴포넌트에 hooks 기술이 도입된 이후에는 class형 컴포넌트에서만 사용된 state를 더욱 간결하게 작성할 수 있게 되었다. class형 컴포넌트 위 사진상, class형 컴포넌트를 사용하였지만 class컴포넌트에서만 사용할 수 있는 state와 LifeCycle을 사용하지 않고 오로지 화면에 보여지는 return을 위해서만 존재한다. function 컴포넌트 따라서, 이와 같이 화면에 보이기만 할 때에는 return만 존재하는 함수형 컴포넌트가 코드상 가독성..

상태 State 개념과 React Hooks를 소개하고, useState와 useEffect를 작성하는 방법을 알아보겠습니다. State React에서 핵심 개념 2가지 중 하나인 State 상태 개념은 컴포넌트 자체적으로 보유하고 있는 데이터입니다. 또 다른 하나인 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식입니다. React Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해 줍니다. React가 지원하는 함수 중 use로 시작하는 것으로 통칭한 명칭입니다. useState useEffect useSta..

저번에는 HTML과 Javascript로 계산기를 만들어보았으며(Javascript 메뉴에 글 기재함), 이번에는 React만을 이용하여 계산기를 만들어 보았습니다. 만든 방식과 원리는 저번과 비슷하며, 이번에는 React의 state를 이용한 것과 큰 차이가 없습니다. state는 자기 자신의 상태를 나타내 주는것으로, setState로 상태를 재설정해 줍니다. Html 구조 코드 vs React.js (state, props, map)코드 비교하기 바로 첫번째 소스코드는 React.js에서 state를 이용해 Html구조로 구성한 코드입니다. 보시다시피 위의 계산기 기능으로서는 전혀 문제없이 구현되었습니다. 하지만, component없이 한 번에 다 소스코드를 작성하였기에 코드가 길어지고, 엄청 많은..

React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 기본적인 이해가 필요합니다. Facebook에서 개발한 컴포넌트(Components) 기반의 Javascript UI Library입니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 하지만 React는 프론트엔드 라이브러리인 만큼 UI 이외의 라우트, 상태 관리 같은 기능들이 내장되어 있지 않습니다. Facebook에서 npm이 느려서 만든것. 굉장히 빠르다. 호환이 안 되는 모듈들이 있다. js, jsx 확장자를 많이 쓴다. jsx란? React용 Javascript js, jsx 파일 확장자를 가진 파일은 "무조건" (import React from 'react') ..