Front-End/React 8

[React] 훅

Hook Hook : 영단어로는 갈고리라는 뜻으로 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것 처럼 끼어 들어가 같이 수행되는 것을 의미한다. 리액트에서의 Hook : 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것이다. useState 가장 대표적으로 많이 사용되는 훅이다. 함수 컴포넌트에서는 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() 훅을 사용해야 한다. Ex) import React { useState} from "react"; function Counter(props) { var count = 0; return ( 총 {count}번 클릭했습니다. count++}> ..

Front-End/React 2022.09.03

[React] 생명 주기

컴포넌트의 생명 주기 생명주기 함수는 3가지로 나누어지는데 Mount, Update, Unmont 이다. 먼저 Mount는 컴포넌트가 생성되는 시점이다. 컴포넌트의 constructor가 실행되어 컴포넌트의 state를 정의하게 된다. 또한 컴포넌트가 렌더링되며 이후에 componentDidMount() 함수가 호출된다. 두번째로는 Update이다. 리액트 컴포넌트도 생애 동안 변화를 겪으면서 여러번 렌더링 된다. 업데이트 과정에서는 컴포넌트의 props가 변경되거나 setState() 함수 호출에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 랜더링 된다. 그 후 componentDidUpdate() 함수가 호출된다. 마지막으로 세번 째는 U..

Front-End/React 2022.09.03

[React] State

State State : 리액트 컴포넌트의 상태 → 리액트 컴포넌트의 변경 가능한 데이터를 state라고 한다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함 시켜야 한다! State 특징 Just 하나의 자바스크립트 객체이다. → state는 자바스크립트 객체 Ex) class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } } LikeButton이라는 컴포넌트이다. 모든 클래스 컴포넌트에는 constructor라는 이름의 함수가 존재하는데 생성자라는 의미를 가지고 있으며, 클래스가 생성 될 때 실행되는 함수이다. 이 생성자 코드 내에 this.state..

Front-End/React 2022.08.29

[React] 컴포넌트와 Props

컴포넌트 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것 객체 지향 개념에서 나오는 것 처럼 클래스라는 붕어빵 틀에서 인스턴스라는 실제 붕어빵이 만들어져 나온다. 그러한 것 처럼 컴포넌트라는 붕어빵 틀에서 엘리먼트라는 붕어빵이 만들어진다. Props 리액트 컴포넌트의 속성이다. 컴포넌트가 붕어빵 틀에 속한다면 props는 붕어빵에 들어가는 재료를 의미한다. 위 화면은 에어비앤비 첫 화면이다. 같은 컴포넌트에서 생성된 엘리먼트이다. 각기 다른 이미지와 텍스트를 가지고 있다. 이러한 것을 props라고 설명 할 수 있다. Props의 특징 읽기 전용이다. (읽을 수 만 있고, 값을 변경 X) props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 생성된 값이다. 다..

Front-End/React 2022.08.19

[React] Element

Element 정의 : 영단어의 뜻은 요소, 성분이라는 뜻을 가지고 있고 리액트의 element는 리액트 앱을 구성하는 요소를 의미한다. Element의 생김새 리액트 엘리먼트는 자바스크립트 객체로 존재한다. ※ 엘리먼트는 컴포넌트 유형(ex. Button)과 속성(ex. Color) 및 내부의 모든 지식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체이다. function Button(props) { return ( {props.children} ) } function ConfirmDialog(props) { return ( 내용을 확인하셨으면 확인 버튼을 눌러주세요. 확인 ) } Button 컴포넌트와 COnfirmDialog 컴포넌트가 있으며, ConfirmDialog 컴포넌트가 Button..

Front-End/React 2022.08.16

[React] JSX

JSX란? JS = JavaScript라고 칭하는데 JSX은 무엇일까? A syntax extension to JavaScript 말 그대로 자바스크립트의 확장 문법이다. JSX은 Javascript와 XML/HTML을 합친 것이라고 보면 된다. 예를 들면, const element = Hello, World!; 왼쪽에 있는 변수 element는 자바스크립트 문법이다. 그러나 대입 연산자 = 의 오른쪽에는 HTML 코드가 나온다. 결과적으로 자바스크립트 코드와 HTML 코드가 결합된 JSX 코드가 되는 것이다. JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거쳐, 최종적으로 자바스크립트 코드가 나오는 것이다. 여기서 JSX 코드를 자바스크립트 코드로 변환하는 역할..

Front-End/React 2022.08.13

[React] create-react-app (프로젝트 생성 및 실행)

프로젝트 생성 개발 환경 : Node.js, npm, VS Code VS Code를 실행 시킨 후, 프로젝트를 만들 디렉토리를 선택하여 터미널에 명령어를 입력한다. $ npx create-react-app (프로젝트 이름) 이후에 생성 된 프로젝트를 확인 할 수 있다. 프로젝트 실행 $ cd my-app $ npm start 생성 된 프로젝트로 이동하기 위해 cd 명령어를 이용하여 my-app 디렉토리로 이동한 후 npm start 명령어를 통해 애플리케이션을 실행한다. 실행 시키게 되면 이런 화면을 볼 수 있다. 필자는 포트3000번을 사용하고 있어서 3001번으로 생성되었다. 소플의 처음 만난 리액트 (저) 이인제 한빛미디어

Front-End/React 2022.08.12

[React] React란?

리액트의 정의 A JavaScript library for building user interfaces. ↑ 공식사이트에서 정의하고 있는 React 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI 라이브러리이며, 가장 많이 사용되는 자바스크립트 UI 라이브러리에 속한다. 또한, SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구이다. ※ SPA : Single Page Application의 약자로 하나의 HTML 틀을 만들어 놓고, 사용자가 특정페이지를 요청 할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것 리액트의 장점과 단점 장점 빠른 업데이트와 렌더링 속도 빠른 업데이트를 위해 내부적으로 Virtual DOM(가상 ..

Front-End/React 2022.08.12