솔직히 간단할 수도 있지만 저처럼 처음부터 한걸음씩 가시는 분들을 위한 내용 입니다.
저는 일단 처음 리액트의 컴포넌트를 배우기를 함수형 컴포넌트로 배우기도 하였고 리액트 훅이 추가되면서부터 대부분 함수형 컴포넌트를 사용하기 때문에 저는 함수형 컴포넌트의 사용을 다루어 보겠습니다.
전체적인 구조와 render함수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
먼저 우리에게 보여질 본체 index.html
import './App.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<App />
</>
);리액트를 npm run start로 실행하면서 제일 먼저 실행되는 index.js 파일입니다.
먼저 const root = ReactDOM.createRoot(document.getElementById('root'));
이부분은 index.html의 id가 root인곳 위치에 render()함수를 사용하기 위한 root변수를 생성 합니다.
root.render()이부분의 render()함수는 우리가 보게될 DOM에 html을 그려주는 함수라고 보시면 되고 이 함수를 사용하는데에는 규칙이 있습니다!
1.태그 하나만을 그려줍니다 만약에 두가지를 넣으려고 한다면
이렇게 오류가 나는데
그러면 어떻게 여러가지 태그요소로 이루어진 홈페이지를 그려내는가?
하면 간단하게 div태그로 하나로 묶어주거나 제가 작성한 코드같이 <>안에 작성 해 주시면 되겠습니다.
root.render(
<> //div여도 됨
<App />
</>
);다만 <div>로 묶어준다면 개발자도구를 열어 Elements를 보면 div태그로 묶여있는걸로 보이는데 <>안에 넣어주시면 깔끔하게 나열이 됩니다
<div>로 묶어주면
<>로 묶어주면
전체에 css를주기위해서라면 #root를 써도되고 특별한 의도가 없으면 <>로 묶어주는게 좋겠죠?
2.JSX 식으로 작성해야한다 입니다 그렇다면 jsx란 무엇이냐?
리액트에서 html과 자바스크립트를 섞어쓸수 있도록 만들어진 자바스크립트의 확장된 문법으로
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const al = () => {
alert('확인');
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<App onClick={al} id="app"/>
<button onDoubleClick={al} className="check">확인</button>
</>
);우리가 알던 onclick같은 이벤트 attribute를 onClick같이 단어구분마다 대문자로 넣어주셔야 하고 class이름은 className으로 해주어야 합니다! (id나 data-* 요소들은 그대로)
본론
컴포넌트는 render()함수안에 있는 App태그 이 친구가 있는데 얘가 컴포넌트이고 우리는 App.js 파일을 불러오는 것으로 컴포넌트로서 사용 하는 것입니다.
import App from './App';
이 구문을 통해 App.js파일을 App이라는 이름으로 불러오는 것.
import './App.css';
function App({onClick,id}) {
return (
<>
<button onClick={onClick} id={id}>App</button>
</>
);
}
export default App; //App을 다른 js파일에서 사용되게 해줌App.js의 코드로 우리는 index.js의 render안에서 <App /> 태그를 통해 이 코드를 불러와서 사용하는것으로 재사용이 가능합니다 여기선 render함수를 사용안하는데 jsx를 쓰는가 싶지만 결국 render 함수내에서 호출을 하는 것이기 때문에 jsx로 작성해주셔야해요
export default App;
이파일의 App을 다른 파일에서 사용할수 있게 해줍니다
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const al = () => {
alert('확인');
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<App onClick={al} id="app"/>
<App />
<App />
<button onDoubleClick={al} className="check">확인</button>
</>
);이렇게 App태그를 재사용하면
App버튼이 복사가된다구😎
이런식으로 우리는 기능을 가진 버튼뿐만 아닌 다른 요소들을 컴포넌트로 따로 작성하여 재사용함으로써 간편하기도 하고 깔끔한 코드를 통해 개발할 수 있습니다!!
다음 글에선 여기서 설명하지 않은 props를 설명하겠습니다!
