react.js

⚽️ 기본개념

JSX : 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침

react의 createElement()라는 함수를 통해서 JSX 코드를 자바스크립트 코드로 변환하는 역할을 해줌 

 

props : 컴포넌트 하위 구성인 엘리먼트들의 세부적인 내용( 다 다름 ) ex. image:"~.jpg" color: "#d~" title: "~"

컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 

 

컴포넌트 : 타입은 세가지 컴포넌트, 함수 컴포넌트, 클래스 컴포넌트 세가지 존재 - tmi : 클래스 컴포넌트가 사용하기 불편하여 잘 사용 x, 함수 컴포넌트를 개선해서 사용하다가 그 과정에서 개발된 훅을 주로 사용함 

- 컴포넌트의 이름은 항상 대문자로 시작해야 함 

 

훅

useState() : state 사용하기 위한 훅

const [변수명, set함수명] = useState(초깃값);

 

react-router-dom : 리액트를 위한 라우팅 라이브러리 

사용자가 원하는 경로로 보내는 과정 

// /places로 접속하면 PlacePage 컴포넌트가 /games로 접속하면 GamePage 컴포넌트가 나옴 
<BrowserRouter>
	<Routes>
    	<Route index element={<MainPage />} />
        <Route path="places" element={<PlacePage />} />
        <Route path="games" element={<GamePage />} />
    </Routes>
</BrowserRouter>

 

---

🏀 함수 

tick() 함수 

현재시간을 포함하고 있는 엘리먼트 생성하여 root div에 렌더링하는 역할 

setInterval() 함수

js의 tick()함수를 매초 호출하고 있는 함수 

 

---

🏈 코드

//clock.js
//시계 만들기 코드
import React from "react";

function Clock(props){
	return (
    	<div>
        	<h1>안녕, 리액트!</h1>
            <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;

# 코드설명 : 루트 폴더 내에 Clock.jsx의 이름의 파일에 Clock이라는 이름의 리액트 함수 컴포넌트 생성 후 작성 

 

//index.js <- Clock 컴포넌트 사용
import Clock from './components/Clock';

setInterval() => {
	ReactDOM.render(
    <React.StrictMode>
    	<Clock />
    </React.StrictMode>,
    document.getElementById('root')
    );
}, 1000);

reportWebVitals();

# 코드설명 : setInterval()함수 사용해 1,000ms(1초)마다 새롭게 Clock 컴포넌트를 root div에 렌더링