Front-End/React

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는 프레임워크라는 점입니다. 라이브러리:  개발하는데 필요한 기능을 모듈화 해놓고, 개발자는 필요한 기능을 호출하여 사용하면 됩니다.프레임워크: 어플리케이션을 만들기 위한 기본적인 틀은 제공되어 있고, 개발자는 필요한코드를 규칙에 따라 작성해주어 사용하면 됩니다. (프레임워크에 라이브러리도 포함되어 있습니다. 프레임워크..