노마드 코더 - React JS로 웹사이트 만들기를 수강한 내용을 정리한 것이다.
The Basic of React
React를 사용하는 목적, 탄생 배경
: 웹사이트, UI를 좀 더 interactive하게 만들기 위해!
리액트를 사용하면 아주 간단하게 interactivity(상호작용)를 만들 수 있다.
ex) 화면에 버튼을 누를 때마다 몇 번 눌렀는지 출력하는 버튼을 만들 때
일반 Javascript를 사용하게 되면
① HTML에 버튼 만들기
② 버튼을 찾기 위해 id나 class 할당
③ Javascript에서 버튼을 호출하기 위해 document.getElementById / querySelector 사용
④ button.addEventListener
⑤ function 실행
⑥ HTML에 총 몇 번 눌렀는지를 나타내는 문구 span 태그로 선언
⑦ 버튼 누를 때마다 횟수를 세는 counter 변수 선언
⑧ span 태그 가져오기
⑨ span.innerText를 사용하여 span의 텍스트 counter로 저장하기.
👉 이렇게 많은 단계를 거치게 된다.
<!DOCTYPE html>
<html lang ="ko">
<body>
<span>Total clicks : 0 </span> // 6번
<button id = "btn">Click me</button> // 1번, 2번
</body>
<script>
let counter = 0; // 7번
const span = document.querySelector("span"); // 8번
const button = document.getElementById("btn"); // 3번
function handleClick() { // 5번
counter += 1;
span.innerText = `Total clicks : ${counter}; // 9번
}
button.addEventListener("click", handleClick); // 4번
</script>
</html>👉 앞으로 이 많은 단계를 React로 어떻게 줄여나갈 건지 배울 것이다!
React JS로 Element를 생성하는 어려운 방법(React 원리 파악용)
👉 실제로는 쉬운 방법으로 사용하므로 리액트의 본질을 파악하는 용도로 필기
👉 암기 X!
① React.createElement로 생성
const span = React.createElement("span");
여기서 변수명으로 선언된 span은 HTML의 태그명인 span과 달라도 된다.
const A = React.createElement("span");
이렇게 선언해도 아무런 상관이 없다.
하지만, 뒤에 createElement의 인자는 사용할 HTML 태그명과 같아야한다.
const span = React.createElement("A");
👉 이렇게 선언하면 안 된다.
const span = React.createElement("span");
<span>/<span>
이 둘은 모두 span 태그를 생성한다는 같은 의미이다.
② span을 웹페이지에 위치시키기 (body안에 React element 호출)
👉 React-DOM.render() 사용
※ React-DOM : 모든 React element들을 HTML body에 둘 수 있게하는 library
ReactDOM.render(변수명, 배치할 곳)
: React element를 가지고 HTML로 만들어서 배치
👉 render의 의미 : 사용자에게 보여준다. (HTML로 배치)
배치할 곳을 정해주기 위해서 HMTL에 일반적으로
<div id = "root"></div> 를 선언하고
Javascript에
const root = document.getElementById("root"); 이렇게 root를 선택하는 변수를 만든 뒤 이 root에 배치한다.
👉 ReactDOM.render(span, root);
💡 HTML에 span을 선언하지 않고 React로 HTML에 span 태그가 들어갔다!!
※ span태그에 내용을 넣으려면 createElement에 인자를 추가하면 된다.
createElement(html태그, 태그의 propery들, content(내용))
createElement("span", { id = "sexy-span" } , "Hi, I'm a span");
👉 이렇게 HTML에 코드를 쓰지 않고 React를 사용하여 내용까지 쓸 수 있다.
※ 이러한 어려운 방식을 사용해보면서 깨달아야 할 점
: React JS는 우리가 해왔던 방식을 거꾸로 하고 있다!
👉 Javascript : HTML을 먼저 만들고, 그걸 Javascript로 가져와서 HTML을 수정하는 방식이었다.
💡 But, React JS에서는 모든 것이 Javascript로 시작해서 그 후에 HTML이 되는 것이다!!
Javascript를 이용해서 element를 생성하고 React JS가 그것을 HTML로 번역한다!
React 여러개 렌더링 하기
: 하나의 영역 태그를 createElement하고 content인자에 배열을 주면 된다!
const span = React.createElement("span", null, "Hello, I'm a span");
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(div, root);
💡 이렇게 html에 입력되는 것을 알 수 있다!
React로 버튼에 Event 만들기
: createElement의 property 인자에 event listener 등록
👉 button.addEventListener 대신에 createElement의 Property 인자에 onClick을 입력하면 된다.
(Javascript의 Event에 On을 붙여서 만든다. MouseEnter 이벤트 = onMouseEnter로 호출)
💡 on을 앞에 붙여서 React JS에게 event listener를 생성한다고 알려줌!
const btn = React.createElement(
"button",
{
onClick : () => console.log("I'm clicked"),
},
"Click me"
);👉 코드 한 번으로 일반 Javascript에서 했던
<button id = "btn">Click me</button>
const span = document.querySelector("span"); // 8번
const button = document.getElementById("btn"); // 3번
button.addEventListener("click", handleClick); // 4번이 4개의 코드를 축약할 수 있다!!
💡 일반 Javascript : addEventListener 반복 작성
💡 React JS : Element를 생성함과 동시에 Property 인자에 Event 등록하여 사용
React JS에서 createElement를 쓸 일은 앞으로 없을 것이다! 단지 배우는 과정에서 React의 원리를 이해하기 위해 배우는 것 뿐! 더 쉬운 방법이 있다.
React JS로 Element를 생성하는 쉬운 방법 - JSX
JSX : Javascript를 확장한 문법
→ HTML 문법과 아주 유사하다.
/*CASE 1 : JSX 사용 */
const Title = (
<h3 id = "title" onMouseEnter= { () => consol.log("mouse enter")}>
Hello I'm a title
</h3>
);
/* CASE 2 : createElement 사용 */
const h3 = React.createElement(
"h3",
{
id = "title",
onMouseEnter : () => console.log("mouse enter"),
},
"Hello I'm a title"
);
👉 JSX를 사용하는 CASE 1이 훨씬 간편한 것을 알 수 있다.
HTML의 문법과 상당히 유사하기 때문에 익숙하다.
createElement에서 사용한 인자들을 살펴보면,
① 태그명은 HTML에서 사용하는 대로 <h3></h3> 이렇게 사용한다.
② Property 값은 HTML에서 태그의 속성처럼
<h3 id = "title" onMouseEnter ={ () => console.log("mouse enter")}> 이렇게 작성하면 된다.
③ 마지막으로 content는 HTML에서 사용하는 것처럼 태그 영역 안에 작성하면 된다.
∴ JSX는 매우 친숙하고 간단하다!
JSX를 사용하여 버튼 만들기
CONST Button = (
<button
style ={
backgroundColor : "tomato",
}
onClick = {() => console.log("I'm clicked")}
>
Click me
</button>
);👉 이렇게 간단하게 만들 수 있다!!
React Babel
※ 위처럼 JSX로 간단하게 구현할 수 있지만 브라우저는 이 문법을 알지 못한다.
따라서 브라우저가 알 수 있도록 JSX 문법을 createElement형식으로 변환해야한다.
이를 자동으로 해주는 것이 Babel이다!
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type = "text/babel">이렇게 Babel을 불러오면 웹 페이지 실행 시
Babel이 JSX문법을 createElement 형식으로 변환하여 브라우저에게 주기 때문에
웹 페이지가 잘 실행된다!
컴포넌트를 다른 컴포넌트 안에 넣어서 호출하기
EX) JSX로 렌더링 하기
const span = React.createElement("span", null, "Hello, I'm a span");
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(div, root);이렇게 createElement로 렌더링 했던 것을 JSX로 바꿔보자.
: JSX로 렌더링을 하기 위해선 JSX로 만든 Element들을 함수로 바꿔줘야한다.
CONST Button = () => ( // 함수로 만들기
<button
style ={
backgroundColor : "tomato",
}
onClick = {() => console.log("I'm clicked")}
>
Click me
</button>
);그 후 영역 태그 안에서 함수를 호출한다!
(Container도 함수로 만들어서 render에서 컴포넌트로 호출 가능)
const Container = () =>(
<div>
<Button />
</div>
);
ReactDOM.render(<Container />, root); <Button /> 은 함수를 호출하는 역할이다.
※ 호출하는 컴포넌트의 이름은 반드시 앞 글자가 대문자여야한다!
👉 미리 컴포넌트 선언 시에 대문자로 만들기
∵ 만약에 앞 글자가 소문자면 React와 JSX는 <button /> 을 HTML button 태그라고 인식한다!
💡 대문자로 적어주는 것은 HTML이 아닌 JSX로 만든 컴포넌트라는 것을 React와 JSX에게 가리키는 역할이다.
JSX로 사용해도 일반적으로 html에 <div id = root></div> 를 선언해서
ReactDOM.render(렌더링할 컴포넌트, root) 를 작성해야한다.
역으로, HTML 태그를 가져오고 싶다면 소문자로 작성하면 된다.
