개발 회고 창고 개발 회고 창고

오류 발생 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 원인 새로운 버전의 React18에서는 ReactDOM.render가 아니라, createRoot를 추가하여 사용해야 한다. 리액트 공식 문서 : https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot 해결방법 import Re..

Props React가 컴포넌트로 작성한 Element를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것을 Properties의 줄임말 props라고 한다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체이다. const Welcome = (props) => { return ( hello, {props.name} ) } ReactDOM.render ( , document.getElementById('root') ) 위와 같은 예시 코드는 " hello, Kim SangDeok "을 렌더링을 하는 예시 코드다. 코드를 실행하면 일어나는 일은 Element로 ReactDOM.render()를 호출한다. React는 {name: "Kim SangDeok"}을 props해서 ..

라우팅 웹 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 리액트에서 라우트 시스템을 구축하기 위해서 사용할 수 있는 방법은 크게 두가지가 있다. 리액트 라우터(React Router) 리액트의 라우팅 관련 라이브러리 중 가장 오래됐고, 가장 많이 사용한다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다. Next.js 리액트 프로젝트의 프레임워크다. Next.js는 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공한다. Next.js 라우팅 시스템은 파일 경로 기반으로 작동한다. Next.js는 리액트 라우..

npm init pakage.json 생성 yarn add create-react-app 리액트 개발을 위한 시작 과정 npm install -g yarn yarn을 개발 공간에 전역으로 설치 yarn add create-react app yarn add -D create-react-app 리액트 디렉토리 구조 생성 npx create-react-app . 리액트 개발 환경 구성 yarn start

React 웹 프레임워크로, JavaScript 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용한다. React는 FaceBook에서 제공해주는 Front-End 라이브러리라고 볼 수 있다. 싱글 페이지 어플리케이션(SPA)이나 모바일 어플리케이션 개발 시 주로 사용한다. React 특징 Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터의 흐름을 가진다. Component 기반 구조 Component는 독립적인 단위와 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다. React는 View를 여러 Component를 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 Component를 만들며, 이 Com..