[React] ReactJS로 영화 웹 서비스 만들기 1

전예원·2022년 1월 3일

React

목록 보기

1/10

💡 노마드 코더의 React 강의로 React 공부 시작!
책도 사고, 강의도 빨리 들어서 React 가 뭔지 공부해보자!

버튼을 클릭하면 숫자가 업데이트 되는 것을 Vanilla JS로 먼저 작성해보고, React로 작성하는 법도 공부해보자!

🔴 Vanilla JS로

<!DOCTYPE html>
<html>

<body>
  <span>Total Clicks : 0</span>
  <button id="btn">Click me</button>
</body>

<script type="text/javascript">
  let counter= 0;
  const button = document.getElementById("btn");
  const span = document.querySelector('span');
  function handleClick() {
    counter = counter + 1;
    span.innerText = `Total Clicks : ${counter}`;
  }
  button.addEventListener('click', handleClick)
</script>

</html>

바닐라 JS로는 html에 만들어진 태그들을 getElementById와 querySelector로 요소를 가져온 다음, addEventListener로 handleClick함수를 발생시켜줘야 한다.

🟠 React 시작하기

🟤 리액트란?

React JS는 어플리케이션이 아주 interactive하도록 만들어주는 library
-> 엔진, interactive한 UI만들게 해줌

react CDN링크를 추가해준다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

React-dom은 library또는 package인데, 모든 react element들을 HTML body에 둘 수 있도록 해줌

🟡 createElement

<script>
  const root = document.getElementById('root');
  const span = React.createElement(
    'span', 
    { id: "sexy-span", style: {color:"red"} }, 
    "Hello, I'm a span"
  );
  ReactDOM.render(span, root); 
</script>

React.createElement(1, 2, 3); : 태그를 생성해준다.
1 : 태그
2: 속성들 : 중괄호를 이용해서 작성함
3: 태그 안에 내용
render(1, 2) : 페이지를 렌더링, 즉 페이지에 보여줌
1: 무슨 태그를
2: 어떤 태그 안에?

🟢 React로 외관 똑같이 만들기

<script>
  const root = document.getElementById('root');

  // const span = React.createElement('span', { id: "sexy-span", style: {color:"red"} }, "Hello, I'm a span");
  const h3 = React.createElement('h3', {onMouseEnter: () => console.log('h3 touched')}, "Hello, I'm a span");
  const btn = React.createElement('button', {onClick: () => console.log("I'm clicked")}, "Click me");
  const container = React.createElement('div', null, [h3, btn]);

  // ReactDOM.render(span, root); 
  // ReactDOM.render(btn, root); 
  ReactDOM.render(container, root);
</script>

createElement의 속성부분 적는 곳에는 이벤트 핸들러도 작성 가능하다. 만약 속성이 없다면 null을 적어주면 된다.
h3, btn 각 각 렌더링 하는 것 보다 container 안에 담아서 container 하나만 렌더링 하는 것이 더 편하다.
3번 인자 부분에 [] 안에 태그 명을 넣어 주면 된다.

🔵 jsx로 작성하기

jsx를 이용해서 좀 더 간편하게 작성 할 수 있다.

<script>
  const root = document.getElementById('root');

  // jsx를 이용해서 createElement 대체하기
  const Title = (
    <h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
      Hello, I'm a span
    </h3>
  );

  const Button = (<button style={{ backgroundColor: "tomato", }} onClick={() => console.log("I'm clicked")}>Click me</button>);
  const container = React.createElement('div', null, [h3, btn]);

  ReactDOM.render(container, root);
</script>

jsx문법으로 작성하면 좀 더 우리가 알기 쉽고, 보기 좋게 작성할 수 있다. html 작성하는 것과 매우 유사하다.
jsx문법은 따로 공부를 해보자

🟣 Babel

JSX로 작성한 것은 브라우저가 읽을 수 없어서 Babel을 이용해서 변환해줘야한다.
문서에 추가해주자!

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

⚪️ 컴포넌트 안에 컴포넌트

<script type="text/babel">
  const root = document.getElementById('root');

  // jsx를 이용해서 createElement 대체하기
  function Title() {
    return (
      <h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
        Hello, I'm a span
      </h3>
    );
  }
  
  const Button = () => (<button style={{ backgroundColor: "tomato", }} onClick={() => console.log("I'm clicked")}>Click me</button>);

  /* 컴포넌트의 첫 글자는 반드시 대문자 
  소문자로 작성하면 react랑 JSX는 HTML button태그라고 생각함 */
  const Container = (
    <div>
      <Title /> 
      <Button />
    </div>
  );
 
  ReactDOM.render(Container, root);

jsx로 작성한 것들을 함수에 담아 컴포넌트로 만들자!
대신 컴포넌트의 첫 글자는 무조건 대문자로 작성해 줘야한다. -> 소문자로 작성하면 react랑 JSX는 그냥 일반적인 HTML 태그라고 인식해 버린다.
<Button />과 <button />은 엄현히 다른 것!!

🟤 Container도 함수로 작성하기

const Container = () => (
  <div>
  <Title /> 
  <Button />
  </div>
);

ReactDOM.render(<Container />, root);

함수로 만들어 주고, render부분도 컴포넌트 형식처럼 바꿔준다.

⚫️ 변수를 JSX로 보내기

숫자 카운팅 되는 부분을 이제 만들어 보자

<script type="text/babel">
  const root = document.getElementById('root');
  let counter = 0;
  function countUp() {
    counter = counter + 1;
  }
  const Container = () => (
    <div>
      <h3>Total Clicks : {counter}</h3>
      <button onClick={countUp}>Click me</button>
    </div>
  );

  ReactDOM.render(<Container />, root);
</script>

counter 변수를 만들어 줬다.
countUp 함수를 만들어 줬다.
바뀌는 변수 부분은 {변수명} <- 이런식으로 작성해준다.
하지만 이렇게만 하면 아무리 눌러도 페이지의 숫자는 올라가지 않을 것이다.

🟤 리렌더링

<script type="text/babel">
  const root = document.getElementById('root');
  let counter = 0;
  function countUp() {
    counter = counter + 1;
    // 리렌더링 하기
    ReactDOM.render(<Container />, root);
  }
  const Container = () => (
    <div>
      <h3>Total Clicks : {counter}</h3>
      <button onClick={countUp}>Click me</button>
    </div>
  );

  ReactDOM.render(<Container />, root); // 페이지 업로드 될 때 1번 렌더링 된다.
</script>

클릭 할 때마다 렌더링을 새로 해줘야지 페이지가 새로고침된다.
ReactDOM.render(<Container />, root); 이 문장을 함수에 담아서 함수를 재사용한다.

<script type="text/babel">
  const root = document.getElementById('root');
  let counter = 0;
  function countUp() {
    counter = counter + 1;
    render(); // 리렌더링 하기
  }
  function render() {
    ReactDOM.render(<Container />, root);
  }
  const Container = () => (
    <div>
      <h3>Total Clicks : {counter}</h3>
      <button onClick={countUp}>Click me</button>
    </div>
  );

  render(); // 제일 처음페이지 렌더링
</script>

Container 함수도 표현식 말고, 선언식으로 표현 할 수 있다.

  function Container() {  
    return (
    <div>
      <h3>Total Clicks : {counter}</h3>
      <button onClick={countUp}>Click me</button>
    </div>
    );
  }