오류 화면 React 프로젝트 진행 중 @material-ui를 설치하려니 오류가 나면서 설치하지 못 했다. 오류 내용 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: todo-react-app@0.1.0 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0 || ^17.0.0" from @m..
클래스형 컴포넌트 코드 작성 1. useState란? useState는 리액트 훅 중 하나이다. 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용된다.. useState는 배열 형태의 반환값을 가지며, 첫 번째 요소는 현재의 상태값이고, 두 번째 요소는 상태를 변경하는 함수다. 이를 통해 우리는 함수형 컴포넌트에서도 상태를 생성하고 업데이트할 수 있다. 2. useState를 사용하는 이유 클래스형 컴포넌트에서만 사용할 수 있던 상태 관리를 함수형 컴포넌트에서도 가능 상태값을 초기화하고 변경하는 함수를 제공받아 편리하게 상태를 관리 용이 상태값이 변경되면 리액트가 자동으로 컴포넌트를 다시 렌더링하여 화면에 반영 함수형 컴포넌트에서도 상태를 관리할 수 있기 때문에 코드의 가독성과 재사용성을 높인다..
JSX 문법에 대해 리액트 공부를 하며, JSX를 처음 접해본다. 사용하기 위해선 규칙을 알아야 하기 때문에 정리를 해봤다. 1. 감싸인 요소 컴포넌트 함수 내부에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 태그를 사용해도 되고, 리액트 v16이상이라면 태그를 사용할 수 있다. 잘못된 예시 function App(){ return ( 문단1 문단2 ) } 감싸주지 않는다면 오류가 발생한다. 올바른 예시 function App(){ return ( 문단1 문단2 ) } 여기서 ~ 를 ~ 또는 ~ 로 써도 무방하다. 2. 자바스크립트 표현 JSX는 DOM 요소 렌더링 기능뿐 아니라, 자바스크립트 표현식을 사용할 수 있다. function App() { let name= '민민의 하드디스크';..
리액트 소스 코드 이해하기 및 JSX에 대해 1. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 기본적으로 제공되는 App.js 코드이다. 리액트는 얼핏보면 파이썬 같기도 하지만 자바스크립트 라이브러리이다. import: 다른 파일들을 불러와서 사용할 수 있으며, 원래 브라우저에서는 없던 기능이며 Node.js에서 지원하는 기능이다. function App(): 기본적으로 function은 함수라고 하는데, 위 코드에서는 함수의 return(반환) 값이 HTML인 마크업 언..
리액트 환경 설정하기 1. Node.js + npm 설치하기 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이며, 웹/앱 등 많은 프로젝트에 사용된다. 백엔드 프로그래머의 필수 요소로 자리잡았다. https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치가 되었다면 터미널 창에서 확인 가능 $ node -v 2. Yarn 설치 yarn은 npm의 글로벌 설치 기능을 통해 설치가 가능하다. $ npm install --global yarn 설치가 되었다면 터미널 창에서 설치확인 $ yarn --versi..
