React7 [React_강의] 6. create-react-app, 기본컴포넌트/함수컴포넌트 1) create-react-app 생성 - npm 설치 - create-react-app 모듈 설치 - 프로젝트 생성: create-react-app [프로젝트명] 2) 함수 컴포넌트 사용하는 방법 컴포넌트는 기본적으로 function을 통해서 만들어줌 컴포넌트는 하나의 완성된 기능 [index.js] import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; function SeeSharpGuide() { return ( 강좌 리스트 리액트 소개 리액트 개발환경구축 리액트 Hello.. 2022. 9. 26. [React] 18 버전/이하 버전 모듈 차이+다운그레이드 강좌에서 쓰는 리액트와 현재 쓰는 리액트가 다른 것 같다. create-react-app을 똑같이 생성해줬건만.... 참고로 내 create-react-app 모듈의 버전은 5.0.1이다. 강좌에선 내쪽에선 왜 이런가 찾아봤더니 올해 22년도 3월부터 리액트18 버전이 나왔다고 한다. 그게 지금 내쪽 코드이고... 강의 v18 이전 버전: react-dom 모듈을 사용하여 DOM을 렌더링함. 내가 받은것 v18 버전: 새로 생긴 react-dom/client 모듈을 사용하여 DOM을 렌터링함 아무래도 create-react-app 5.0.1은 리액트 v18을 지원하는 듯하다. package.json에서 확인하니 다음과 같았다. 18버전은 아직 나온지 얼마 되지 않았고 나는 처음 배우는 입장이니 강의에 맞.. 2022. 9. 26. [React_강의] 5. 동적개체 props 1) 컴포넌트화 시키기: 이용 모든 컴포넌트는 반드시 최상위 엘리먼트 root로 묶여야함 대신에 프레그먼트 이용 하단 코드처럼 모두 컴포넌트화 시켜서 마지막에 최종 랜더링하도록 만들어줄 수 있음 function BookTitle() { return My Book; } const BookFooter = () => 제가 집필한 책 목록 입니다. const Copyright = () => { return (Copyright © ); } function BookApp() { return ( {title} {seeSharp.title} {seeSharp.description} ); } // 최종 렌더링 ReactDOM.render( , document.getElementById("root"); ); * 여기서 을.. 2022. 9. 4. [React_강의] 4. 리액트 작성(React.createElement, Babel) 1) React.createElement 이용 React Devloper Tool 크롬 도구 현재 페이지는 리액트를 사용하고 있구나를 표시해줌. var headerStyle = { "style" : {"color": "blue"} }; ReactDOM.render.(React.createElement("h1", headerStyle, "안녕하세요"), document.getElementById("root")); 컴포넌트 메뉴가 크롬 개발자창에 뜬다.... ============================================ 중첩된 HTML 요소를 React.createElement 함수 여러개. ReactDOM.render( React.createElement( "div", null, Reac.. 2022. 8. 27. 이전 1 2 다음
