React

create-react-app 없이 React 구동하기

create-react-app 없이 React를 구동하기 위해 설치해줘야 할 라이브러리 및 webpack.config.js 파일 내용 정리 👉 react, react-dom, webpack, webpack-cli npm init -y npm install react react-dom npm install -D webpack webpack-cli 👉 babel 관련 라이브러리 npm install -D babel-loader @babel/preset-env @babel/preset-react 👉 webpack-dev-server npm install -D webpack-dev-server 👉 react-refresh ( 페이지 새로고침 없이 리랜더링 ) npm install -D react-refresh ..

React - css 적용하기

React에서 css 적용하기 css 파일을 import 하기 module.css 파일 import 하기 styled-components 만들기 1. React에서 css 적용하기 webpack은 기본적으로 NodeJs 환경에서 실행된다. JavaScript 파일들을 묶어서 bundle 해주는 것이기 때문에 css 파일을 적용하는 것 역시 같은 맥락에서 바라보아야 한다. 만약 jsx 파일 안에서 css 파일을 import 해올 수 있다면 webpack에서 파일을 bundle할 때 css 파일 역시 bundle 해주게 될 것이다. 이러한 방식으로 css를 적용하기 위해서는 webpack.config.js 파일 안에서 css 처리와 관련된 추가적인 설정을 해주어야 한다. 우선 다음의 라이브러리를..

React - webpack.config.js

이번 포스팅에서는 webpack.config.js 파일을 이용해서 React에서 사용할 webpack 환경설정을 진행해보고자 한다. 기본적으로 webpack은 Nodejs 환경에서 돌아간다. 그렇기 때문에 npm을 이용해 패키지를 설치하고 사용하는 것이 가능하다. npm init -y npm install react react-dom npm install -D webpack webpack-cli 프로젝트 디렉토리 안에서 webpack.config.js 파일을 생성해주자. src 디렉토리와 dist 디렉토리 역시 생성해준다. src 디렉토리 안에는 webpack이 bundle 할 파일들이 들어가게 된고 dist 디렉토리 안에는 bundle 된 js 파일이 위치하게 된다. 그리고 src 디렉토리 안에는 in..

React - State 끌어올리기

이번 포스팅에서는 State 끌어올리기에 대해 알아보고자 한다. Component 구조로 이루어진 React에서는 종종 동일한 데이터에 대한 변경사항을 여러 component에 반영해야 할 필요가 있다. 이럴 때 사용하는 테크닉 중 하나가 가장 가까운 공통 조상으로 state를 끌어올리는 것이다. 전체적인 프로세스는 다음과 같다. 1. 가장 가까운 부모 component 안에서 state를 만들어준다. 2. 부모 component 안에서 state를 변경할 수 있는 함수를 만들어서 자식 component에게 전달한다. 3. 자식 component는 전달 받은 함수를 이용해서 부모 component의 state를 변경한다. 4. 상태가 변경되었기 때문에 자식 component 안의 render( ) 함수들..

React - 리스트와 Key

이번 포스팅에서는 React를 사용해서 리스트를 만들어보고자 한다. 우선 ReactDOM.render( )를 이용해 랜더링 할 component를 다음과 같이 만들어 놓고 시작하도록 하자. 이제 랜더할 리스트 component를 만들어서 component 안에 집어 넣기만 하면 된다. 원래는 게시글 리스트 같은 것을 만들 때 데이터베이스와 통신해서 그 결과물을 가져와야 하지만 배열 형태의 더미 데이터를 state 객체 안에 담아놓고 리스트를 만들어 보도록 하겠다. 짚고 넘어가야할 포인트는 map 함수와 JSX 문법을 이용해 배열에 담긴 데이터를 엘리먼트 안에 넣어서 다시 배열로 만들었다는 것이다. 그렇게 반환된 배열을 안에 집어넣기만 하면 리스트가 만들어진다. 이 때 리스트의 각 항목에 "key"를 넣어..