리액트

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 - State 끌어올리기

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

React - Props & State

Props 와 State의 역할 Props State counter 버튼 만들기 1. Props 와 State 의 역할 props와 state는 React에서 데이터를 사용할 때 등장하는 개념이다. 각각의 역할에 대해 알아보기 이전에 React를 공부함에 있어서 중요하게 짚고 넘어가야 할 포인트에 대해 언급하고자 한다. " 데이터가 바뀌면 화면이 바뀐다. " 프론트 서버에서는 백 서버에 데이터를 요청하고 요청받은 데이터를 이용해서 화면을 그리는 작업을 진행하게 된다. 하지만 만약 데이터가 바뀌면 화면이 바뀔 수 있도록 프로그래밍 되어 있다면 보다 수월하게 UI를 제작할 수 있을 것이다. 그리고 이러한 모토를 가지고 있는 것이 바로 React이다. 여기서 데이터란 props와 state를 말하..

React 기본 개념

React란? React & ReactDOM Component 클래스형 Component 함수형 Component 1. React란? React 공식 홈페이지에서는 React를 다음과 같이 정의하고 있다. "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 말 뜻 그대로 React는 JavaScript 라이브러리 혹은 웹 프레임워크라고 생각하면 된다. (라이브러리 보다는 프레임워크에 가깝다고 생각한다.) 라이브러리와 프레임워크의 차이를 간략히 기술하자면 폴더 구조가 없는 형태를 라이브러리, 폴더 구조가 있는 형태를 프레임워크라고 볼 수 있다. 따라서 프레임워크를 사용할 때는 특정 디렉토리 안에서 작업을 해줘야만 하는 특성이 있다. React는 Facebook에서 제공해주는 오픈..