리액트(React) 는 자바스크립트 라이브러리(웹 프레임워크)의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
출처 : 위키백과
이외에도 유명한 Vue,Angular... 등이 있다.
알아보기 쉽게 React와javscript를 코드로 비교해보자
<body>
<button id ='btn'>Click me</button>
</body>
<script>
const button = document.querySelector('#btn');
function handleClick(){
console.log("this is click");
}
button.addEventListener('click',hadnleClick);
</script>
</html>javascript
1.button 태그 & id추가
2.querySelector & getElementById를 통해 id값 찾기
3.버튼에 이벤트리스너 기능 추가
버튼을 누르게 되면 "this is click" 이라는 문구가 콘솔창에 나오는 코드이다.
javascript를 기초를 알고있다면 굉장히 익숙한 코드일 것이다.
그렇다면 React로도 구현해 보자.
React
코드에 앞서 이 방식 잘 쓰지 않는다고 한다.(니콜라스 형님이 말씀하심)
그런데도 사용해 보는 이유는 React의 기본을 알고 가보자 이것이다!
JSX 없이 사용해 보기
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
html에서React를 사용할 수 있게 external형식으로 불러온다.
브라우저에서 불러와진 것을 확인할 수 있다.
<body><div id="root"></div></body>
<script>
const root = document.querySelector("#root")
const btn = React.createElement("button",{onClick:()=> console.log('this is click'),style:{backgroundColor:"tomato"}},"click me");
ReactDOM.render(btn, root);
</script>javascript 코드에서는 없던 style을 추가
이벤트리스너가 엄청 간단하게 변했다.
{변수명:()=> 명령}
ReactDOM.render()를 사용해서 브라우저에 띄워준다.
여러개를 넣어야 되는 경우
<script>
const root = document.querySelector("#root")
const h3 = React.createElement("h3",{onMouseEnter:()=> console.log("mouse enter")},"hi there");
const btn = React.createElement("button",{onClick:()=> console.log('this is'),style:{backgroundColor:"tomato"}},"click me");
const container = React.createElement("div",null,[h3, btn])
ReactDOM.render(container, root);
</script>
</html>h3 코드와 container코드를 추가
React.createElement("div",null,[h3, btn])
이렇게 배열(array)형식으로 감싸주고
변수를 만들어 render에 넣어주자
JSX
h3 코드를 JSX형식으로 바꿔보자
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>우선 jsx코드를 브라우저가 인식할 수 있게 하려면 코드를 변형해 주는 babel standalone을 가져와야한다.
<script type="text/babel">
</script>그런다음 type을 text/babel로 지정 하면 script안에서 jsx코드를 사용할 수 있게 된다.
<script>
const h3 = <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>Hi i'm title</h3>
</script>h3코드를 jsx로 변형했다.
뭔가 익숙하면서 낯선느낌? html과 javascrip가 퓨전된 느낌이다😅
이제 container코드안에 내용은 필요 없어졌다.
jsx문법에 맞춰 사용해 보자.
<script>
function Title(){
return(<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>Hi i'm title</h3>)
}
const Button = () =>(React.createElement("button", { onClick: () => console.log('this is'), style: { backgroundColor: "tomato" } }, "click me"));
</script>그전에 h3 = Title, btn = Button으로 변수명을 변경했다.
Title은 기본적인 function, Button은 arrow function으로 만들어 주자
const Container = <div>
<Title/> <Button/></div>container = Container 로 변경
위에 function들을 넣는 형식은 <변수명/> 이런식으로 넣어주면 된다.
🖐 주의할점
변수명 첫 번째 글자는 꼭 대문자로 지어주자.
예를 들어 Button처럼 소문자로 지어주면 React와 JSX코드는 HTML에 "button"태그로 인식하여 내보내게 된다.
EX )
const Container = <div>
<button/>
<Title/> <Button/>
</div>
