리액트를 사용해서 프로젝트는 간간히 했는데 막상 문서로 정리한 적은 한번도 없었던 것 같다.
알던 내용은 다잡고 잊은 내용은 다시 되짚도록
니꼬쌤의 리액트 강의를 듣고 나름대로의 정리를 해봐야지,,
https://nomadcoders.co/react-for-beginners
📌리액트 가져오기 (reactjs, react-DOM)
리액트는 라이브러리다. 이전에 프로젝트를 진행할 때는 공식 사이트에서 리액트를 다운받아서 npm 을 통해 앱을 실행시키는 형태로 작업을 했었는데
니꼬쌤의 강의는 unpkg 사이트에서 라이브러리를 script 형식으로 가져와서 사용하였다. 강의 상에서 설명을 위해 이같이 하는 것으로 보인다.
<script src = "https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
React JS는 어플리케이션이 interactive 하게 만들어주는 library,React-DOM은 리액트에서 생성한 요소(element)를 html의 body안에 넣을 수 있도록 해준다.
간단한 html 코드에서
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src = "https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("span", {id:"sexy-span"});
ReactDOM.render(span, root);
</script>
</html>body 안에 root 아이디를 가진 div를 넣어주고 react 라이브러리를 통하여 요소를 생성하여 react-dom 라이브러리를 통하여 root 안에 span을 렌더링 해준다.
페이지 검사를 하면 위처럼 root 안에 span이 추가되었다.
📌React.createElement
<div id="root"></div>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{
id: "sexy-span",
style: { color: "red" }
},
"Hello I'm a span");
const btn = React.createElement("button", null, "Click me!");
const container = React.createElement("div", null, [span,btn]);
ReactDOM.render(container, root);div, span, button 요소들을 생성해주고, 그 생성한 요소들을 리스트 형태로 container 변수의 div안에 [span, btn] 과 같이 넣어서 렌더링을 해준다.
📌JSX를 사용하여 element 만들기
JSX는 javascript의 확장된 문법으로, HTML에서 요소를 만드는 것과 흡사한 방법으로 javascript에서 요소를 바로바로 만들 수 있도록 해준다.
지금까지 내가 배워온 리액트가 이 JSX를 사용하는 방식이었다,, 모르고 그냥 썼었네,,,
const Title = <h3 id="title" onMouseEnter={() => console.log("mouse entered")}>
Hello I'm a title</h3>
/*const Title = React.createElement(
"h3",
{
id: "title",
onMouseEnter: ()=>console.log("mouse entered")
},
"Hello I'm a title");*/주석처리된 부분을 JSX로 처리하여 간단하게 표현할 수 있다.
📌JSX 통한 컴포넌트 렌더링
const container = React.createElement("div", null, [Title,btn]);
Title과 Button 변수를 만들어서 html형식으로 저장을 했는데,
이들을 묶어 렌더링을 하는 것도 위처럼이 아닌 간단하게
표현을 할 수 있다.<script type="text/babel">
const root = document.getElementById("root");
const Title = () => <h3 id="title" onMouseEnter={() => console.log("mouse entered")}>
Hello I'm a title</h3>
const Button = () => <button onClick={() => console.log("I am clicked")}>Click Me!</button>
const Container = () => <div>
<Title />
<Button />
</div>
ReactDOM.render(<Container/>, root);
</script>먼저 element 들을 모두 함수화한다. =() = > .
그 다음 같이 묶어주고 싶다면 Container함수에 사용한 것처럼 안에 컴포넌트 태그 형태로 넣어줄 수 있다.
컴포넌트는 모두 첫 문자가 대문자로 시작해야 한다!
Title, Button, Container 등등마지막으로 요소들을 담은 컴포넌트를 (위 예시에서는 Container) 렌더링 해준다.
내가 아는 리액트 사용법까지 오기까지의 듀토리얼이었다. 사실 내가 사용하는 것이 JSX였구나~ 라는 것도 모른 채 무지성으로 리액트를 대했던거 같다. 아무래도 1주일 안에 프로젝트 하나를 완성시키려다보니,,ㅎㅎㅎ
