[React 완벽 가이드] section 3 : 리액트 기초 및 실습 컴포넌트

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

24. Module Content

• React Core Syntax & JSX
• Working with Components
• Working with Data

25. 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가?

• you will be able to focus on your core business logic that makes up your application instead of having to focus on the actual steps of updating the page when something happens somewhere.
• React is a JavaScript library for building user interfaces
• HTML, CSS & JavaScript are about building user interfaces as well.
• React makes building complex, interactive and reactive user interfaces simpler
• React is all about components.

What is Components?

• Because all user interfaces in the end are made up of components

Why components?

• Reusablility - Don't repoeat yourself
• Separation of Concerns - Don't do too many things in one and the same place (function)
• conclusion : Split big chunks of code into multiple smaller functions

26. 리액트 코드는 "선언적 방식"으로 작성되었습니다!

1. React allows you to create re-usable and reactive components consisting of HTML and JavaScript (and CSS)
2. Declarative Approach
   (반드시 "함수형 프로그래밍"을 알아야 할까? 글에서 더 자세한 내용을 살펴볼 수 있다.  )
3. Define the desired target state(s) and let React figure out the actual JavaScript DOM instructions

27. A Note About New React Projects & NodeJS

• DON'T download NodeJS version 17! Because at the moment, the created projects won't work with that version.
  • 참고로 나는 경우 nvm 을 사용하여 v16.17.0 버전을 추가 설치하여 사용함.

28. 새로운 리액트 프로젝트 생성하기

• nodeJs : 브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임 환경이다.
• create react app 툴을 위해 이 node.js가 필요하다.
• https://nodejs.org/en/ 를 통해 최신버전 설치

29. 시작 프로젝트

• 첨부파일 & github 참고

30. 표준 리액트 프로젝트 분석하기

// index.js
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• index.html 파일에 div 태그가 있고, 이 div 태그에 무엇을 렌더링 해야 하는지 알린다.

// package.json
    "react": "^18.0.0",
    "react-dom": "^18.0.0",

• react, react-dom 은 Rect 라이브러리로부터 같은 의존성을 갖는다.

Tips

• import 시 third party libraries or 만든 js 파일 중 하나라면 .js는 생략해도 된다.

31. JSX 소개

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;

• JSX는 자바스크립트 XML을 의미한다. HTML은 XML이라고 할 수 있음

• 모든 소스와 스크립트들을 보여준다. 다소 난해한 코드들을 볼 수 있다.
• 전체 리액트 라이브러리 소스코드와 전체 리액트 돔 라이브러리 소스코드를 포함하기 때문이다.
• 브라우저에서 실행되는 변환된 코드라고 할 수 있다. 우리가 작성된 코드가 아니다. 일반적으로 브라우저에서 지원되지 않지만, 자동적으로 브라우저에서 작동하는 코드로 변환될 것이다.

• App()을 검색한 결과 기존 작성한 코드보다 다른 코드들이 추가된 모습을 확인할 수 있다.

32.리액트 작동 방식

컴포넌트는 기본적으로 자체 html 요소일 뿐이다.

1. React allows you to create re-usable and reactive components consisting of HTML and JavaScript (and CSS)
2. Declarative Approach (선언형 접근 / How 보다 What에 초점!💨 )
3. Define the desired tagert state(s) and let React figure out the actual JavaScript DOM instructions

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>This is also visible! </p>
    </div>
  );

}
export default App;

→ 서버는 자동을 변화를 알아채고 업데이트 한다.

→ 이러한 이유들로 리액트는 컴포넌트라는 개념을 도입했다.

33. 첫 번째 사용자 지정 컴포넌트 만들기

• 한 컴포넌트당 하나의 파일을 갖도록 연습하는 게 좋다.
• 리액트에 있는 컴포넌트는 단지 자바스크립트의 함수일 뿐이다. (Just javascript function!)

const root = ReactDOM.createRoot(document.getElementById('root'));

→ 이 작업은 루트 컴포넌트를 위해 한번만 하는 작업이다.

import './App.css';
import ExpenseItem from './components/ExpenseItem';

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem>This is also visible!</ExpenseItem>
    </div>
  );
}

export default App;

→ 소문자로 시작하는 요소는 내장된 html 요소이고, 대문자로 시작하는 요소는 개발자가 정의한 요소이다.

34.더 복잡한 JSX 코드 작성

• 가장 중요한 규칙! JSX 작성시 반드시 한개의 루트 요소를 가져야 한다.
• 가독성을 고려하여 괄호를 사용할 수도 있다. ()

35. 기본 CSS 스타일 추가

• 일반적인 html에서는 class를 사용하지만, jsx에서는 className을 사용한다.
• class는 javascript에서 예약된 단어이기 때문!

36. JSX에서 동적 데이터 출력 및 표현식 작업하기

• 중괄호 (Curly braces)를 사용한다.
• 모든 data 객체에서 사용 가능한 내장 메소드인 toISOString을 호출해서 문자열로 출력할 수 있다.

37. "props"를 통해 데이터 전달하기

• 기본적으로 우리만의 사용자 지정 html 요소처럼 속성을 구축하고 있다. 리액트로도 사용자 지정 컴포넌트도 속성을 가질 수 있는데, 리액트에서 이 개념은 속성 대신 props 라고 불린다. 
• props 는 properties 를 나타낸 것
• props객체에서 키와 밸류로 이루어진 파일 포맷을 갖고 있다.
• 재사용 가능한 컴포넌트를 만들 수 있게 해준다. (중요 💯 💯 💯)

function ExpenseItem(props) {
    return (
        <div className='expense-item'>
            <div>{expenseDate.toISOString}</div>
            <div className='expense-item__description'>
                <h2>{props.title}</h2>
                <div className='expense-item__price'>${expenseAmount}</div>
            </div>
        </div>
    )
}

→ props 의 값을 활용할 수 있음! 🤧

      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].amount}>
      </ExpenseItem>

→ 키는 정의돤 속성 이름인 title, amount, date가 될 것이고, 밸류는 여기서 설정된 값이 될 것이다.

 

38. 컴포넌트에 "일반" JavaScript 논리 추가하기 컴포넌트를 여러 컴포넌트로 분할하기

• You can Google for JS toLocaleString to find an official article on this method. And this method simply helps you with outputting dates in human readable formats.
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString

function ExpenseItem(props) {
  const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();

  return (
    <div className="expense-item">
      {/* <div>{props.date.toISOString()}</div> */}
      <div>
        <div>{month}</div>
        <div>{year}</div>
        <div>{day}</div>
      </div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}
export default ExpenseItem;

39.  컴포넌트를 여러 컴포넌트로 분활하기

• convention of naming 
• 여닫는 태그에 컨텐츠 없는 컴포넌트가 있다면 자동으로 닫히는 요소로 작성할 수 있다. 

<ExpenseDate><ExpenseDate />
<ExpenseDate /> // O

40.  연습하기 : 리액트 및 컴포넌트 기본 사항

• pass ! 

41.  연습하기 : 리액트 및 컴포넌트 기본 사항(정답)

• 두 개의 새로운 컴포넌트를 추가했고, props를 이용해서 컴포넌트에 데이터를 전달했고, css 를 이용하여 기본적인 스타일을 추가했다. 

42.  composition의 개념 ("children prop")

• App.js 에서는 Expenses 컴포넌트를 사용하고, Expenses 에서는 ExpenseItem을 사용한다. 
• Generally, this approach of building a user interface from smaller building blocks is called composition.
• 기존의 border-radius, box-shadow를 Card 컴포넌트로 따로 만들어보자. 

import "./Card.css";

function Card(props) {
  return <div className="card"></div>;
}

export default Card;

.card {
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0.25);
}

import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate";
import Card from "./Card";

function ExpenseItem(props) {
  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );
}
export default ExpenseItem;

• Card 컴포넌트가 제대로 동작하지 않는다. 
• we will use one special prop which is built into React, which every component receives, even if you're never setting it explicitly.

import "./Card.css";

function Card(props) {
  return <div className="card">{props.children}</div>;
}

export default Card;

• Children, as I said, is a reserved name and the value of this special children prop will always be the content between the opening and closing tags of your custom component.

import "./Card.css";

function Card(props) {
  const classes = "card " + props.className;
  return <div className={classes}>{props.children}</div>;
}

export default Card;

• now anything we receive as a class name from outside is added to that string.

Now, why would we do that? What did we gain by doing that?

리액트로 작업할 때  항상 composition 을 사용하게 될 것이다. 컴포넌트를 결합할 때마다, 여러분은 composition을 이용한다. composition에서 특히 중요한 부분은 props.children이다. wrapper 컴포넌트를 생성하게 하며 특별한 컴포넌트이며, 종종 사용할 일이 생긴다. 

43. 첫 번째 요약

• component, jsx
• how we organize our files
• how we write our functions

44. JSX 자세히 보기 

• 브라우저는 JSX 코드를 지원하지 않는다. 

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

•  package.json 에서 리액트와 관련있는 두 가지 종속 요소를 갖고 있다. 
• 여기 부분은 강의에 나와있는 부분이랑 살짝 다르긴 하다. version 이 다른건지.. 😶😶

• 과거 버전에서는 항상 react를 import 해야 했다. 최신 버전에서는 필요하지 않음! 

  return React.createElement(
    "div",
    {},
    React.createElement("h2", {}, "Let's get started!"),
    React.createElement(Expenses, { itmes: expenses })
  );
  
   // return (
  //   <div>
  //     <h2>Let's get started!</h2>
  //     <div>
  //       <Expenses items={expenses} />
  //     </div>
  //   </div>
  // );

import React from "react";

• 기술적으로 위 코드를 Import 할 필요는 없지만, JSX 코드를 사용할 때 리액트가 사실은 내부에서 사용되고 있다는 것을 강조하기 위해 해당 구문을 import 해보자. 
• 루트 jsx 요소로 왜 일부 wrapping 요소가 필요한지 알 수 있다. (반환되는 두 요소를 나란히 가질 수 없는 이유) 리액트 createElement 세계에서는 한 개 이상의 children element 를 가질 수 있는 element 1개를 생성하기 때문이다.  따라서 이 한개의 wrapper root jsx element를 갖는 것이다. 하나 이상을 반환할 수 없다. 이는 보이지 않는 곳에서 일어나는 작업들이다. 

45. 컴포넌트 파일 구성하기

• components 폴더 안에서도 적절하게 폴더를 나눠서 활용하는 게 좋다.

46.  대체 함수 문법(syntax)

• arrow function 활용하기 
• 하지만 개인의 취향이니 취향껏 사용하면 된다. (just personal preference)

function App() {
	...
}

const App = () => { // arrow function 
	...
}

 

---

https://www.udemy.com/course/best-react/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
https://www.codingfactory.net/12959