ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • react next 공부하기(기본개념) - 1
      개발자의 공부는 은퇴까지 필수다/node js & react 2022. 7. 27. 00:02

      참고문헌: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

       

      * 사용용어

      • 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법입니다.
      • 라우팅 - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다.
      • 데이터 가져오기 - 데이터가 있는 위치와 가져오는 방법.
      • 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치입니다.
      • 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법.
      • 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다.
      • 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
      • 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 조정되는 방식입니다.
      • 개발자 경험 - 팀의 애플리케이션 구축 및 유지 관리 경험.

       

      *명령형 대 선언적 프로그래밍

      리액트는 선언적 프로그래밍이다.

      명령형 프로그래밍 : 사용자 인터페이스를 업데이트 하는 방법 에 대한 단계를 작성

      선언적 프로그래밍 : DOM 메서드를 작성하는 대신 개발자가 표시하려는 항목을 선언할 수 있음

       

      * react, react-dom

      • react 는 핵심 React 라이브러리입니다.
      • react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다.


      * jsx

      • 태그는 유효한 자바스크립트 문법이 아니다.
      • 브라우저는 기본적으로 JSX를 이해하지 못하므로 JSX 코드를 일반 JavaScript로 변환하려면 Babel 과 같은 JavaScript 컴파일러가 필요합니다.


      * react 를 사용한 결과 (달라진점)

      1. 반복적인 코드를 줄인다.

      2. 사용자를 대신하여 작업을 수행하는 재사용 가능한 코드 스니펫이 포함된 라이브러리이다.

       

      적용전

      <script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

      적용 후

      <script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>



      * javascript 최신문법 사용 (es6)

      • Functions and Arrow Functions
      • Objects
      • Arrays and array methods
      • Destructuring
      • Template literals
      • Ternary Operators
      • ES Modules and Import / Export Syntax

       

      * React 핵심 개념

      • Components
      • Props
      • State

       

      * 기본 구성요소 만들기

       

      1. React 에서 컴포넌트는 함수이다.

      2. React 구성 요소는 일반 HTML 및 JavaScript와 구별하기 위해 대문자로 표시해야 한다.

      3. 꺾쇠 괄호를 사용하여 일반 HTML 태그를 사용하는 것과 같은 방식으로 React 구성 요소를 사용합니다.

      <!-- index.html -->
<html>
<body>
<div id="app"></div>

<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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/jsx">
    const app = document.getElementById("app")

    function Header() {
        return <h1>Develop. Preview. Ship. 🚀</h1>;
    }

    ReactDOM.render(<Header />, app);
</script>
</body>
</html>

       

       

      * 중첩 구성 요소 만들기

      function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}

ReactDOM.render(<Header />, app);

       

       

      * Props 로 데이터 표시하기

      정보 조각을 React 구성 요소에 속성으로 전달할 수 있는데, 이것들을 props 라고 한다.

      React에서 데이터는 구성 요소 트리를 따라 흐릅니다. 이를 단방향 데이터 흐름 이라고 합니다.

      자식컴포넌트는 props 를 첫번째 매개변수로 받아들인다.

      const app = document.getElementById("app")

function Header({title}) {
    return <h1>{title}</h1>;
}

function HomePage() {
    return (
        <div>
            <Header title="React 💙" />
        </div>
    );
}

ReactDOM.render(<HomePage />, app);

      jsx 내부에 중괄호 내부에서는 javascript 문법과 동일하게 사용할 수 있다.

       ex 함수호출 ----> 

      function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

       

      * 목록 반복하여 출력하기 (map) + event 사용하기

          function HomePage() {
        const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
        return (
            <div>
                <Header title="React 💙" />
                <ul>
                    {names.map((name) => (
                        <li key={name}>{name}</li>
                    ))}
                </ul>

                <button onClick={handleClick}>Like</button>
            </div>
        );
    }

       

       

       

      * react hooks 사용하기

      배열의 첫 번째 항목은 state value이며 이름은 무엇이든 지정할 수 있습니다. 

      배열의 두 번째 항목은 update값에 대한 함수입니다.

      useState 내에 들어가는 파라미터는 초기값입니다.

      const [likes, setLikes] = React.useState(0);

      주의 ::

      첫 번째 함수 매개 변수로 구성 요소에 전달되는 props와 달리 상태는 구성 요소 내에서 시작되고 저장됩니다. 상태 정보를 props로 자식 구성 요소에 전달할 수 있지만 상태를 업데이트하는 논리는 상태가 처음 생성된 구성 요소 내에서 유지되어야 합니다.

       

      따라서

      props 는 읽기전용 정보, state는 양방향

      '개발자의 공부는 은퇴까지 필수다 > node js & react' 카테고리의 다른 글

      react next 공부하기(앱 만들기) - 3  (0) 2022.07.28
      react next 공부하기(기본개념) - 2  (0) 2022.07.28
      react template 실행 중 오류  (0) 2021.01.26
      [react] function component에서 redux-saga로 api 호출 및 화면에 리스트 불러오기  (0) 2020.11.30
      [webstorm] react 컴포넌트 생성 단축키 ( VS Code의 rfce 단축키가 webstorm에선? )  (0) 2020.11.17

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바