강의일지 - 리액트 기초 - (3) Node.js, React.js 기초

강의 정보

1. 강의명

인프런 - winterlood - 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
https://www.inflearn.com/course/한입-리액트/dashboard

2. 수강목적

1) Tripin 프로젝트에서의 사용을 위해

• Tripin : 여행일정 추천 웹서비스
• 프로젝트에서 지도api 및 일정 조율 기능 및 다양한 UI 기능을 구현하게위한 도구로 react를 사용하기로 함

2) 프론트엔드에서 프레임워크를 어떤 방식으로 사용하여 개발하는지 경험

• 이전 까지는 html, css, js로만 웹페이지 구성
• 프레임워크를 처음으로 배워봄으로써 웹 UI 구성 경험치 축적

3. 수강기간

2022.04.30. ~

강의 일지

25-28강

• 25-28강 : Node.js 기초
  • Node.js : chrome의 javascript runtime인 v8을 이용하여 브라우저 밖에서 js를 실행할 수 있게 해줌
    
  • module
    • calc.js

      const add = (a, b) => a + b;
      const sub = (a, b) => a - b;
      
      module.exports = {
        modulename: "calc module",
        add: add,
        sub: sub,
      };

    • index.js

      const calc = require("./calc");
      
      console.log(calc.add(1, 2));
      console.log(calc.add(3, 2));
      console.log(calc.add(5, 2));
      console.log(calc.add(4, 2));

29-34강

• 29-34강 : React.js 기초
  • React 특징 : Component 기반의 UI 라이브러리 : 선언형 프로그래밍 : virtual dom - 연산 최소화
    
  • Create React App
    • index.js

      import React from "react";
      import ReactDOM from "react-dom/client";
      import "./index.css";
      import App from "./App";
      
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>
      );
      
      // If you want to start measuring performance in your app, pass a function
      // to log results (for example: reportWebVitals(console.log))
      // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

    • App.js

      // import "./App.css";
      
      import MyHeader from "./MyHeader";
      import MyFooter from "./MyFooter";
      
      function App() {
        const style = {
          App: {
            backgroundColor: "black",
          },
          h2: {
            color: "red",
          },
          bold_text: {
            color: "green",
          },
        };
      
        const number = 5;
      
        return (
          <div style={style.App}>
            <MyHeader />
            <h2 style={style.h2}>안녕 리액트</h2>
            <b id="bold_text" style={style.bold_text}>
              {number} 는 {number}
            </b>
            <MyFooter />
          </div>
        );
      }
      
      export default App;

    • MyHeader.js

      const MyFooter = () => {
        return <footer>myfooter</footer>;
      };
      
      export default MyFooter;

    • MyFooter.js

      const MyHeader = () => {
        return <header>헤더</header>;
      };
      
      export default MyHeader;

  • State
    • Counter.js

      import React, { useState } from "react";
      
      const Counter = () => {
        const [count, setCount] = useState(0);
      
        const onIncrease = () => {
          setCount(count + 1);
        };
      
        const onDecrease = () => {
          setCount(count - 1);
        };
      
        return (
          <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
          </div>
        );
      };
      
      export default Counter;

    • App.js

      // import "./App.css";
      
      import MyHeader from "./MyHeader";
      import MyFooter from "./MyFooter";
      import Counter from "./Counter";
      
      function App() {
        const number = 5;
      
        return (
          <div>
            <MyHeader />
            <Counter />
            <MyFooter />
          </div>
        );
      }
      
      export default App;

  • Props
    • Container.js

      const Container = ({ children }) => {
        console.log(children);
        return (
          <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
            {children}
          </div>
        );
      };
      
      export default Container;

    • App.js

      // import "./App.css";
      
      import MyHeader from "./MyHeader";
      import MyFooter from "./MyFooter";
      import Counter from "./Counter";
      import Container from "./Container";
      
      function App() {
        const counterProps = {
          a: 1,
          b: 2,
          c: 3,
          d: 4,
        };
      
        return (
          <Container>
            <div>
              <MyHeader />
              <Counter {...counterProps} />
              <MyFooter />
            </div>
          </Container>
        );
      }
      
      export default App;

    • Counter.js

      import React, { useState } from "react";
      import OddEvenResult from "./OddEvenResult";
      
      const Counter = ({ initialValue }) => {
        const [count, setCount] = useState(initialValue);
      
        const onIncrease = () => {
          setCount(count + 1);
        };
      
        const onDecrease = () => {
          setCount(count - 1);
        };
      
        return (
          <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count} />
          </div>
        );
      };
      
      Counter.defaultProps = {
        initialValue: 0,
      };
      
      export default Counter;

  • 리랜더링 되는 시점
    1. 해당 컴포넌트의 State가 변경되었을 때
    2. 해당 컴포넌트의 Props가 변경되었을 때
    3. 부모 컴포넌트가 리랜더링 될 때