HTTP 200 OK

Memento mori & Carpe diem

react 8

리액트 훅

리액트 훅 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업한다. 기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기 때문에 상태 로직의 재사용이 불가능하였지만 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었다. 리액트 훅 사용 규칙 최상위 레벨에서만 호출 가능, 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 X 오직 리액트 함수 컴포넌트 내에서만 호출 가능 usestate() 상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API, 초기 상태와 현재 상태를 저장, 컴포넌트가 다시 렌더링 되어..

REACT 2022.05.30

PostCSS

PostCSS란? CRA(create-react-app)에서도 default설정인 postcss에 대해 알아보고자 작성하게 되었다. Sass가 CSS의 전처리기 인것에 비해 postcss는 JS플러그인을 통해 스타일을 변형하는 후처리기로서 동작한다. copy-webpack-plugin은 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인이다. html-webpack-plugin autoprefixer : -webkit- 등의 prefix 없이 스타일을 지정할 수 있다. a { display: flex; } 스타일 변환 결과 a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } ..

REACT 2022.04.10

State and Lifecycle

엘리먼트 렌더링에서는 UI를 업데이트 하는 한 가지 방법만 학습했으며, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출했습니다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') );} setInterval(tick, 1000); setInterval을 사용해 Clock컴포넌트가 매초 스스로 업데이트 할 수 있도록 변경할 수 있습니다. 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변화 할 수 있다. React.Componen..

REACT 2022.03.28

babel과 webpack

react를 사용하기 위한 기본 라이브러리(react+babel+webpack) 기본 라이브러리 npm init npm i react react-dom react: 리액트 라이브러리 react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다. react-scripts: 리액트 프로젝트 초기 셋업을 쉽고 간편하게 해준다. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 자동으로 옛날 브라우저들을 지원한다. babel-preset-react: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면..

REACT 2022.01.19

Components와 Props

개념적으로 컴포넌트는 JS함수와 유사하다. props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JS함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터이다.) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다. class Welcome extends React..

REACT 2022.01.15

엘리먼트 렌더링이란??

엘리먼트는 React앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술함 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. 컴포넌트와 엘리먼트를 혼동하지 말 것! 엘리먼트는 컴포넌트의 구성요소이다 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 본다면 const element = Hello, world; 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 '루트'DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재, ..

REACT 2022.01.15

JSX란 무엇인가?

REACT 공식문서를 토대로 학습한 내용을 정리하기 위해 작성하였다. 빠른 시일내에 공식문서를 익혔으면 좋겠다. JSX(표현식)란 JavaScript에 XML을 추가한 문법이다. 그러므로 JS의 모든 기능이 포함되어 있음. 작성 코드는 브라우저에서 실행되기 전에 번들링 과정에서 바벨을 사용해 일반 JS 형태의 코드로 변환된다. React에서는 본질적으로 렌더링 로직이 UI로직과 연결된다. 컴파일이 끝나면 JSX표현식이 정규 js 함수 호출이 되고 js객체로 인식된다. 즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다. JSX 문법규칙 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. function App..

REACT 2022.01.15

vue와 react 설치방법

Vue.js 와 React.js의 초기설치 방법에 대해서 정리했습니다. 1) vue 2.0 node.js를 다운로드 받고 npm install vue를 통해 vue를 설치한다. vue install -g @vue/cli vue init webpack 프로젝트명 2.0 버전과는 다르게 vue 3.0버전에서는 vue create 프로젝트명 으로 vue 프로젝트를 설정할 수 있다. 3.0버전에서도 2버전의 vue init webpack 프로젝트명 를 사용 할 수 있다. cli는 전역으로 설치하는 vue전용 npm패키지로서 reacte appr과 비슷한 초기세팅을 도와주는 패키지이다. vue init webpack은 사용자가 직접 원하는 설정을 지정해 프로젝트를 만들지만 3.0버전은 이 과정이 생략된다. 2) ..

CS 2022.01.13