TIL 22 - React 예제 200(1~5)
✍️ .jsx에 html 적용
< 📁 _App.js > import React from 'react'; function App(){ return( <div> <h1>Start React 200!</h1> </div> ); } export default App;
👉 import React from 'react';
이 코드가 없다면 react는 이 파일의 component를 사용하지 못한다.
👉 export default App;
App이라는 컴포넌트를 내보낸다는 뜻이다.이 코드를 사용하면 다른 컴포넌트에서
App컴포넌트로 불러와 사용할 수 있다.
✍️ .jsx에 css 적용
< 📁 _App.js > import React from 'react'; import './App.css'; function App(){ return( <div> <h1>Start React 200!</h1> </div> ); } export default App;
👉 같은 폴더 경로에 위치한 App.css를 import 한다.
상위 폴더에 위치하는 css를 사용하려면 './../App.css'와 같이 사용해 접근한다.
✍️ Component 사용하기
< 📁 R01_LifecycleEx.js > import React from 'react'; class R01_LifecycleEx extends Component{ render(){ return( <div> <h1>Start React 200!</h1> </div> ); } } export default R01_LifecycleEx;
👉 index.html의 id = 'root'의 div요소 내부에 App 컴포넌트가 렌더링 된다.
< 📁 _App.js > import React from 'react'; import './App.css'; import LifecycleEx from './R01_LifcycleEx'; function App(){ return( <div> <h1>Start React 200!</h1> <LifecycleEx/ > </div> ); } export default App;
👉 App.js 파일과 같은 경로에 위치한 R01_LifcycleEx.js파일을 import해 사용할 수 있도록 한다.
R01_LifecycleEx.js에서 작성한 컴포넌트를 사용하고 render() 함수에서 읽어 들였던 <h2> 코드가 이식된다.
✍️ 생명주기 함수 render() 사용하기
< 📁 R02_LifecycleEx.js > import React, { Component } from 'react'; class R01_LifecycleEx extends Component{ render(){ return( <div> <h1>Start React 200!</h1> </div> ); } } export default R02_LifecycleEx;
👉 react에서 제공하는 Component Class를 상속받아 구현하기 위해 Component를 import 해준다.
👉 render는 리턴되는 html 형식의 코드를 화면에 그려주는 함수이다.
👉 class 속성을 사용하면 render함수는 필수적으로 따라와야한다.
< 📁 _App.js > import React from 'react'; import './App.css'; import LifecycleEx from './R02_LifcycleEx'; function App(){ return( <div> <h1>Start React 200!</h1> <LifecycleEx/ > </div> ); } export default App;
👉 App.js 파일과 같은 경로에 위치한 R02_LifcycleEx.js파일을 import해 사용할 수 있도록 한다. R02_LifecycleEx.js에서 작성한 컴포넌트를 사용한다.
✍️ 생명주기 함수 constructor(props) 사용하기
< 📁 R03_LifecycleEx.js > import React, { Component } from 'react'; class R03_LifecycleEx extends Component{ constructor(props){ super(props); this.statd = {}; } render(){ return( <div> <h1>Start React 200!</h1> </div> ); } } export default R05_LifecycleEx;
👉 constructor(props)함수는 생명주기 함수 중 가장 먼저 실행되며, 처음 단 한번만 호출된다. 컴포넌트 내부에서 사용되는 state(변수)를 선언하고 부모 객체에서 전달받은 props(변수)를 초기화할 때 사용한다. super 함수는 가장 위에 호출해야한다.
< 📁 _App.js > import React from 'react'; import './App.css'; import LifecycleEx from './R03_LifcycleEx'; function App(){ return( <div> <h1>Start React 200!</h1> <LifecycleEx/ > </div> ); } export default App;
👉 App.js 파일과 같은 경로에 위치한 R03_LifcycleEx.js파일을 import해 사용할 수 있도록 한다. R03_LifecycleEx.js에서 작성한 컴포넌트를 사용한다.
출처 : 초보자를 위한 리액트 200제(React)
❗️마치며
오늘 리액트를 배우고 props와 state에 대해 조금은 알게 된 것 같다.
아직은 많이 낯선 라이브러리지만 곧 익숙해질 것이라 믿으며.. 열심히 공부해야겠다 😆
Author And Source
이 문제에 관하여(TIL 22 - React 예제 200(1~5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@eoskandlv/TIL-22-React-예제-20018저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)