Front-End

React Hooks 이해하기

React Hooks란?React Component는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지가 존재합니다. 함수형 컴포넌트는 클래스형 컴포넌트보다 코드도 간결하고, 더 빠른 성능이 나옵니다. 그럼에도 예전엔 클래스형 컴포넌트를 더 많이 사용했었습니다. 그 이유는 상태 관리와 라이프사이클 메소드를 클래스형 컴포넌트에서만 사용할 수 있었기 때문입니다.하지만 React 16.8부터 리액트 Hooks가 발표되고 함수형 컴포넌트에서 Hooks를 사용하여 상태 관리와 사이트 이펙트를 처리할 수 있게 되어, 현재는 함수형 컴포넌트를 대다수가 사용합니다.  React 라이프 사이클  주요 React HooksuseStateuseEffectuseContextuseReduceruseCallbackuseMemouseR..

React Props와 State를 통한 데이터 관리

React는 컴포넌트 기반 라이브러리로, 데이터를 전달하는 두 가지 주요 방법인 Props와 State가 있습니다. Props (Properties)props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. props는 읽기 전용이기 때문에, 전달받은 자자식 컴포넌트는 props를 수정할 수 없습니다. (값을 수정하고 싶으면, 부모 컴포넌트에서 state를 변경시켜줘야 합니다.) props 기본 사용법부모 컴포넌트function ParentComponent() { const name = "yeo"; return } 자식 컴포넌트function ChildComponent(props) { return Hello, {props.name}!}  여러개의 props부모 컴포넌트funct..

React 리액트에서 UI를 정의할 때 사용하는 JSX: JavaScript XML

JSX: JavaScript XMLJSX(JavaScript XML)는 React에서만 사용하는 JavaScript 확장 문법입니다. JSX를 사용하면 JavaScript 코드 안에 HTML과 유사한 코드를 작성할 수 있습니다. 즉, JSX는 React 컴포넌트를 만들 때 UI를 정의하는데 사용합니다. JavaScript로 UI 표현`React.createElement`를 사용하여 React 요소를 생성할 수 있습니다.아래 코드는 type: h1이고, props: {className: 'hello'} 을 갖고, 자식: 'Hello, React!' 문자열을 갖는 React 요소를 생성합니다.// createElement(type, props, ...children)const element = React.c..

React 기본 구조 완벽 정리, SPA(Single Page Application) 이해하기

React 애플리케이션 구조아래는 `create-react-app`을 사용하여 생성된 기본 React 애플리케이션의 구조 예시입니다.my-app/├── node_modules/├── public/│ ├── index.html│ ├── favicon.ico│ └── ...├── src/│ ├── App.css│ ├── App.js│ ├── App.test.js│ ├── index.css│ ├── index.js│ ├── logo.svg│ └── ...├── .gitignore├── package-lock.json├── package.json└── README.mdnode_modules/프로젝트에서 사용하는 모든 외부 라이브러리와 모듈을 저장합니다.`npm install`..

React 리액트란? 기본 개념, 컴포넌트, 가상 DOM, 설치까지 한눈에 보기

리액트(React)란?React는 Facebook에서 개발한 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 리액트와 같이 웹 개발을 위한 Tool로 Vue나 Angular도 많이 사용되지만, 최근 React의 수요가 더욱 증가하고 있습니다. 라이브러리인 ReactReact와 Vue, Angular의 가장 큰 차이점은 React는 라이브러리이고, Angular와 Vue는 프레임워크라는 점입니다. 라이브러리:  개발하는데 필요한 기능을 모듈화 해놓고, 개발자는 필요한 기능을 호출하여 사용하면 됩니다.프레임워크: 어플리케이션을 만들기 위한 기본적인 틀은 제공되어 있고, 개발자는 필요한코드를 규칙에 따라 작성해주어 사용하면 됩니다. (프레임워크에 라이브러리도 포함되어 있습니다. 프레임워크..

JS padStart와 padEnd 메소드: 문자열 길이에 맞게 문자 채워넣기 (문자열 패딩)

JavaScript의 padStart와 padEnd는 문자열을 특정 길이로 패딩하는데 사용됩니다. 이를 통해 지정한 문자를 원하는 길이로 문자열을 채우거나, 텍스트를 정렬하는데 활용됩니다. padStart와 padEnd는 ES8(ECMAScript 2017)부터 표준으로 추가되었습니다. 따라서 오래된 브라우저나 환경에서는 지원되지 않을 수 있음에 주의해야합니다. padStart 문자열의 시작 부분에 특정 문자열로 채워, 지정한 길이 만큼 만듭니다. 첫 번째 인자는 최종 길이를 나타냅니다. 두 번째 인자는 채울 문자열입니다. 두 번째 인자를 생략하면 기본값으로 공백(" ")이 사용됩니다. 아래 예제는 문자열 길이가 5가 되도록 문자열 "0"을 시작 부분부터 채워준 코드입니다. const str = "123..

D3.js SVG: 2차원 벡터 그래픽을 표현하는 XML 기반 마크업 언어

SVG SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을 그릴 수 있는 요소를 제공합니다. SVG 장점 SVG는 이미지가 아니기 때문에 크기를 조절하여도 이미지가 깨지지 않습니다. 또한 간단한 이미지 같은 경우 JPG나 PNG 같은 비트맵 파일에 비해 크기가 작습니다. 이러한 이유로 아이콘이나 로고에 많이 쓰입니다. 이미지 뿐만 아니라 JS와 CSS와 결합하여 애니메이션을 만들 수 있고, 차트와 그래프를 표현하여 데이터도 시각화할 수 있습니다. SVG 사용법 SVG 시작 태그를 먼저 작성해줍니다. 속성..

D3.js 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리

D3.js D3.js는 "Data-Driven Documents"의 약어로, 데이터 시각화를 위한 무료 오픈 소스 JavaScript 라이브러리입니다. D3.js는 데이터를 가져와 이를 시각화 시켜주는 도구로써 그래프, 차트, 지도 대시보드 등 다양한 형태의 데이터 시각화를 구현하는데 도움이 됩니다. D3.js는 HTML 문서의 DOM 요소를 선택하고 조작하여 데이터를 시각화합니다. 또한 SVG를 사용하여 그래프, 차트 등의 요소를 그립니다. SVG란? SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을..