[React] 240131 JSP->React Refactoring, webpack, NEXT.JS, JSX와 JS 섞어쓰기

이슬기·2024년 1월 31일
React

React

목록 보기
8/13

webpack이란?

React

npm init -y : package.json이 생성됨

NEXT.JS

React Framework이다.

함수 컴포넌트를 태그로 사용하고 싶다면 - 첫 글자를 대문자로 적을 것

JSX와 JS 섞어쓰기

Q1) text가 대문자로 시작하면 h1을, 소문자로 시작하면 h3이 선택되도록 코드를 수정하시오.

charAt을 사용한다.

"Text".charAt(0);
=> T

"text".charAt(0) === "text".charAt(0).toUpperCase();
=> false

text.charAt(0) === text.charAt(0).toUpperCase();
=> true
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>섞어쓰기-1단계</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root"); /* querySelector가 유연하게 #, . , "" 받을 수 있다 */
    // 함수를 사용자 정의태그로 사용하려면 반드시 대문자로 선언할 것
    // 함수로 태그를 만든다
    // 파라미터를 통해 주소번지를 넘길 수 있다
    // but, 상위태그에서 하위태그로만 가능하다
    const Message = ( { text } ) => { //파라미터의 text는 props이다
      // JS 영역
      if (text.charAt(0) === text.charAt(0).toUpperCase()) {
        return <h1>{text}</h1> // 여기는 JSX
      } else {
        return <h3>{text}</h3>
      }
    }
    const element = (
      <>
        <Message text="Text" />
        <Message text="text" />
        </>
    )
    ReactDOM.createRoot(rootElement).render(element);
  </script>
</body>
</html>

Q2) 1부터 5까지 출력하는 함수 컴포넌트를 만들고 홀수는 작게 짝수는 크게 출력하시오.

삼항연산자 사용
반복문은 사용하지 못 함

Q3) props 중복 사용하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root"); /* querySelector가 유연하게 #, . , "" 받을 수 있다 */
    // 함수를 사용자 정의태그로 사용하려면 반드시 대문자로 선언할 것
    // 함수로 태그를 만든다
    // 파라미터를 통해 주소번지를 넘길 수 있다
    // but, 상위태그에서 하위태그로만 가능하다
    const Count = ({num, selected}) => {
      return selected ? <h1>{num}</h1> : <h3>{num}</h3>
    }

    const element = ( /* 그룹으로 묶어줄 때는 () 사용 */
      <>
        <Count num={1}/>
        <Count num={2}/>
        <Count num={3} selected={true} />
        <Count num={4}/>
        <Count num={5}/>
      </>
    )
    ReactDOM.createRoot(rootElement).render(element);
  </script>
</body>
</html>

Q4) for문이 아닌 map을 활용하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root"); /* querySelector가 유연하게 #, . , "" 받을 수 있다 */
    // 함수를 사용자 정의태그로 사용하려면 반드시 대문자로 선언할 것
    // 함수로 태그를 만든다
    // 파라미터를 통해 주소번지를 넘길 수 있다
    // but, 상위태그에서 하위태그로만 가능하다
    const Count = ({num, selected}) => {
      return selected ? <h1>{num}</h1> : <h3>{num}</h3>
    }

    const element = ( /* 그룹으로 묶어줄 때는 () 사용 */
      <>
        {/*for문 보다는 map을 더 활용*/}
        {
          [1,2,3,4,5].map(num => (
            <Count num={num} selected={num === 3} />
          ))
        }
      </>
    )
    console.log(element);
    ReactDOM.createRoot(rootElement).render(element);
  </script>
</body>
</html>

useState 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root");
    const App = () => {
      console.log('11'); // mount 되고 있다
      const [items, setItems] = React.useState([]); // 위 아래를 통해 mount되고 있음을 알 수 있다
      console.log('22'); // mount 되고 있다
      console.log(items);
      return (
        <>
          <h1>🍌</h1>
        </>
      )
    }
    ReactDOM.createRoot(rootElement).render(<App />);
  </script>
</body>
</html>

map을 사용하여 리스트 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root");
    const App = () => {
      console.log('11'); // mount 되고 있다
      const [items, setItems] = React.useState([
          { id: 1, title: "자바의정석", publish: "에이콘", count: 0 }, /* id가 key */
          { id: 2, title: "리액트정석", publish: "한빛미디어", count: 0 },
          { id: 3, title: "오라클정석", publish: "길벗", count: 0 },
        ]);
      console.log('22'); // mount 되고 있다
      console.log(items);
      console.dir(items); /* 트리구조를 보고 싶을 땐 dir */
      return (
        <>
          <ul>
            {/* map을 사용하여 리스트 출력하기 */}
            {
              items && 
                Object.keys(items).map((key) => (
                  <li key={key}>{`제목 : ${items[key].title}, 출판사 : ${items[key].publish}, 추천수 : ${items[key].count}`}</li>
                ))
            }
          </ul>
        </>
      )
    }
    ReactDOM.createRoot(rootElement).render(<App />);
  </script>
</body>
</html>

함수컴포넌트 쪼개기

아래와 같이 구조 변경해보기

<Paint>
  <Nice />
</Paint>

<BookList>
  { Object.keys(items).map(()=> (
    <BookItem>{}</BookItem>
  ))  
</BookList>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>     
</head>
<body>
  <div class="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector(".root");
    const BookList = () => {
      const [items, setItems] = React.useState([
          { id: 1, title: "자바의정석", publish: "에이콘", count: 0 },
          { id: 2, title: "리액트정석", publish: "한빛미디어", count: 0 },
          { id: 3, title: "오라클정석", publish: "길벗", count: 0 },
        ]);
        const [items2, setItems2] = React.useState([{
          0: { id: 1, title: "자바의정석", publish: "에이콘", count: 0 },
          1: { id: 2, title: "리액트정석", publish: "한빛미디어", count: 0 },
          2: { id: 3, title: "오라클정석", publish: "길벗", count: 0 },
        }]);        
      return (
        <>
          <ul>
            {/* map을 사용하여 리스트 출력하기 */}
            {
              items && 
                items.map((item) => (
                  <BookItem key={item.id} item={item}/>
                ))
            }
          </ul>
        </>
      )
    }///end of BookList
    //props안에는 Object(1건 - {})가 있다
    const BookItem = (props) => {
      const item = props.item;
      return (
        <li>{`제목 : ${item.title}, 출판사 : ${item.publish}, 추천수 : ${item.count}`}</li>        
      )
    }
    ReactDOM.createRoot(rootElement).render(<BookList />);
  </script>
</body>
</html>

like 설정

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.querySelector("#root");
    const App = () => {
      const [책제목, 책제목설정] = React.useState("자바의 정석");
      const [좋아요, 좋아요설정] = React.useState(0);
      const [싫어요, 싫어요설정] = React.useState(0);
      const increase = () => {
        좋아요설정(좋아요 + 1);
      }
      const decrease = () => {
        싫어요설정(싫어요 + 1);
      }
      return (
        <>
          <h3>{책제목}</h3>
          <span onClick={increase}>👍</span>{좋아요}
          <span onClick={decrease}>👎</span>{싫어요}
        </>
      )
    }
    ReactDOM.createRoot(rootElement).render(<App />);
  </script>
</body>
</html>
profile
이슬기
이전 포스트

[React] 240130 JSX, Babel, JSX vs HTML, div vs fragment, Element, Render

0개의 댓글