[React] 💻 react완벽가이드(3)

React 완벽가이드 섹션3 - 리액트 기초 및 실습 컴포넌트

 

---

1.리액트 - 컴포넌트란?

리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리

애플리케이션의 각 상태에 대한 간단한 뷰만 설계,  React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 

리액트의 중요한개념은 컴포넌트 이고, 여기서 모든 UI는 컴포넌트로 구성되어 있다.

-   상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌.

-  재사용이 가능,코드를 우려사항을 분리

 

2.선언적 방식

html과 javascript를 결합한 방식으로 컴포넌트를 만든다.

리액트는 선언적 접근방식으로 작성한다.

리액트는 최종상태를 정의하고, 화면에 불러오기위한 지시사항들을 뒷단에 생성

-

명령형 접근방식(imperative approach)을 따르는  일반 자바스크립트

단계별로 무엇을 해야하는지 정확하게 지시,  복잡하고 번거롭거나 변경되는 요소들이 많을 수있다.

 

3. create- react-app 으로 시작하기

npx create-react-app my-app
cd my-app
npm start

먼저 node.js를 설치해준다. 그리고 명령프롬프트에 위 코드를 입력

cd(changing dictionary)

npm start (개발 서버를 구동하여 리액트 응용프로그램의 미리보기를 관리)

구동시킨 터미널에서 ctrl+c누르면 나가짐

 

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

index.js 페이지가 열릴때마다 실행되는  첫번째 코드파일

ReactDOM.render(<App />, document.getElementById('root'));

render 메소드는 두개의 인자, 즉 두개의 매개변수를 취한다. 두번째 매개변수는 기본 자바스크립트인 DOM API를 가짐.

 

5.JSX 

JSX - 자바스크립트 안에있는 HTML 코드 

자바스크립트의 확장문법으로,XML과 매우 비슷하게 생겼음

작성한 코드구문을 브라우저에서 소스로 확인하면 일반 자바스크립트형태로 변환되어 보인다.

 

 

6.컴포넌트 만들기

App.js는 루트 컴포넌트의 역할을 함

소문자로 시작하는 요소는 내장된 html요소이기때문에 내장요소로 찾고

대문자로 시작하는 요소는 사용자에 의해 정의된 요소

 

 파일명 짓는관례

- 대문자로 시작하는 한 단어

- 한 단어안에 여러단어 결합시 중간에 시작하는 서브단어는 대문자로

- 컴포넌트의 역할을 함축하는 네이밍할 것

 

+ ETC.

- 함수는 html코드(jsx코드)를 리턴

- 반환되는 문장마다 반드시 한개의 루트 요소를 가질 것

 

7.기본 CSS 추가

css파일을 작성하고 js파일에 import 시켜주면 된다

 

8.JSX 동적데이터 출력 및 표현식 작업

리턴문에서 중괄호를 사용하여 자바스크립트 코드를 실행할수 있음

function ExpenseItem() {
  const expenseTitle = 'Car Insurance';
 
  return 
      <div>
        <h2>{expenseTitle}</h2>
      </div>
  );
}

 

Date 객체는 텍스트로 출력될수 없음 .내장메소드인 toISOString호출해서 문자열로 출력

 {expenseDate.toISOString()}

9.props

props는 properties를 나타내는 것으로 사용자 지정 컴포넌트의 속성을 설정

 

props 사용하기
상위컴포넌트에서 하위컴포넌트 props값을 지정해 준다.

function App() {
  const expenses = [
    { 
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
  ];
  return (
    <div>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
      ></ExpenseItem>
    </div>
  );
}

하위컴포넌트 파일에서 함수 매개변수로 props를 준다.

function ExpenseItem(props) {
  return (
    <div>
      <div>{props.date.toISOString()}</div>
      <div>
        <h2>{props.title}</h2>
        <div>${props.amount}</div>
      </div>
    </div>
  );
}

 

일반 JavaScript  구문활용

  const month =props.date.toLocaleString('en-US', {month: 'long'});

컴포넌트 분리

여닫는 태그 사이에 어떤 컨텐츠도 없는 컴포넌트가 있다면 아래처럼 자동으로 닫히는 요소로 작성가능

  <ExpenseDate />

 

10. Composition

Composition(합성) : 작은 빌딩 블록으로부터 사용자 인터페이스를 구축하는 접근 방법,

                                         서로다른 객체를 여러개 붙여서 새로운 기능이나 객체를 구성

컴포넌트간에 코드를 재사용하려면 상속 대신 합성을 사용하는 것이 좋다.

 

 

일부 구성 요소는 자식요소를 미리 알지 못함. 예약어인 children prop을 사용하여 자식 요소를 출력에 직접 전달 

//wrapper component 

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

export default Card;

classes상수- 밖에서 className으로 받는것들은 문자열로 추가 

 

//wrapper component 적용할 한 컴포넌트의 리턴구문
return (
    <Card>
      <div>
        <h2>{props.title}</h2>
        <div>${props.amount}</div>
      </div>
    </Card>
  );

중복된 코드나 공통으로 사용하고 싶은 코드를 래퍼 컴포넌트에 쓰고,

개별적으로 쓰고싶은 코드는 래퍼컴포넌트로 감싸지는 컴포넌트에 작성한다. 

 

 

11 . JSX 자세히 보기

원래 JSX쓰는 파일 상단에 일일히 react 를 import해줘야 했다. 이제는 최신버전의 리액트 프로젝트셋업에서 처리되기때문에 안해도됨

 

jsx구문을 쓰지않을 경우 코드가 어떻게 생겼는지 보여주는 예

React가 하나의 루트요소만 반환하는것은 이 예시를 보면 쉽게 이해됨

createElement는 항상 하나의  루트를 리턴하기 때문

 

---

REF.

https://www.udemy.com/course/best-react/

강의를 듣고 정리한 학습노트입니다 :)