[SeSAC] React 학습 정리(1)

 

1. React 

React는 웹 UI를 구성하기 위한 프론트엔드 자바스크립트 라이브러리이다.

 

 

2. React 프로젝트 생성 및 실행 방법

https://dksl00.tistory.com/57

 

 - 리액트 프로젝트 이름 규칙 : 대문자 사용X, 단어 구분은 하이픈(-) 사용

 - 프로젝트 생성 & 실행 : 

   - npx create-react-app my-test-app

   - npm start

 

* npx create-react-app my-test-app

   명령어로 생성된 디렉토리 구조

 

* npm start 명령어로 서버 실행시 브라우저를 통해 접근 

 

3. React는 단방향 데이터 바인딩

React는 단방향 데이터 바인딩을 지원하고 권장해서 데이터의 흐름이 한 방향으로만 흐르는 것을 지향 합니다.

 

https://dksl00.tistory.com/56

 

 

4. 컴포넌트 & props

컴포넌트

React는 Component 기반 구조를 사용해서 UI(View)를 여러 Component로 쪼개서 만듭니다.

그래서 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성할 수 있습니다.

 

예시)

1. index.js 에서 페이지 렌더할 때 App 컴포넌트를 사용

2. App 컴포넌트에서 FunctionComponent, ClassComponent, Button 등 컴포넌트를 사용

 

클래스형 컴포넌트(Class Component) 와 함수형 컴포넌트(Functional Component)는 작성 방법과 더불어 몇가지 차이점이 있슴다.

 - 클래스형 컴포넌트느 리액트의 핵심기능(state, lifecycle..)등 사용 가능 합니다.

 - 함수형 컴포넌트는 짧고 직관적이며, 사용방법이 더 간단하며 메모리 사용에 이점이 있습니다. (React 16.8 부터 hooks 의 등장으로 함수형 컴포넌트에도 핵심기능을 사용할 수 있게 되었습니다.)

 

 

함수형 컴포넌트 작성 예시

import PropTypes from 'prop-types';

export default function FunctionComponent(props) {
  const student = '홍길동';
  const { name } = props;
  return (
    <div>
      <h1>Hi {student}</h1>
      <p>여긴 FunctionComponent</p>
      {/* <p>
        새로운 컴포넌트의 이름은 <b>{props.name}</b>
      </p> */}
      <p>
        현재 컴포넌트의 이름은 <b>{name}</b>
      </p>
    </div>
  );
}

FunctionComponent.defaultProps = {
  name: '기본값',
};

FunctionComponent.propTypes = {
  name: PropTypes.string,
};

 

 

클래스형 컴포넌트 작성 예시

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ClassComponent extends Component {
  student = '홍길동';
  // 클래스형 컴포넌트는 render 함수 필수
  render() {
    const { name } = this.props;
    return (
      <div>
        <h1>Hi {this.student}</h1>
        <p>여긴 ClassComponent</p>
        <p>
          {/* 현재 컴포넌트의 이름은 <b>{this.props.name}</b> */}
          현재 컴포넌트의 이름은 <b>{name}</b>
        </p>
      </div>
    );
  }
  
  // 이렇게도 작성 가능
  //   static defaultProps = {
  //     name: '기본값',
  //   };
  //   static propTypes = {
  //     name: PropTypes.string,
  //   };
}

ClassComponent.defaultProps = {
  name: '기본값',
};

ClassComponent.propTypes = {
  name: PropTypes.string.isRequired, // isRequired 인데 default값이 있다? 그럼 isRequired를 만족하게 된다.
};

export default ClassComponent;

 

 

props

props는 properties의 줄임말로 React 컴포넌트 간에 데이터를 전달하는 데 사용되는 속성입니다. 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. (이는 부모->자식 단방향 데이터 흐름을 유지합니다.)

props는 읽기 전용이며, 자식 컴포넌트에서 수정할 수 없습니다.

 

예시)

1. 부모 컴포넌트에서 자식 컴포넌트의 name 속성을 정의

<FunctionComponent name="함수형 컴포넌트" />

 

2. 자식 컴포넌트에서 매개변수로 props를 받고 부모에서 정의한 name 속성값을 사용 할 수 있다.

export default function FunctionComponent(props) {
  const { name } = props; // props.name

}

 

 

6. JSX & 바벨

JSX는 JavaScript XML의 약어로, React에서 UI를 정의하는 데 사용됩니다. 

JSX는 JavaScript 코드 안에서 XML 형식으로 작성된 UI 요소를 나타냅니다. 

Babel은 JSX 코드를 일반 JavaScript 코드로 변환하는 역할을 합니다. (컴파일 할때)

 

1. 전체는 하나의 태그로 감싸야합니다. html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로 작성

   - <> </>  이런 빈 태그로 감싸도 됩니다.

   - 아래 코드는 <div> 태그로 전체 코드를 감싸는 형태

 

2. html를 작성하다가 중간에 js 문법을 사용하고 싶을 때는 {중괄호}로 감싸야 합니다.

   - 아래 코드에서 props.name 부분

 

3. JSX는 삼항연산자 사용 :

   - if, for 문 사용은 return 문 밖에서 사용 가능

 

4. JSX에서 CSS 적용 : 

  - 인라인 방식으로 전부 작성 or CSS 값을 변수에 저장 후 스타일 적용

  - 객체 형식으로 작성, 카멜케이스 형식으로 작성

 

5. class 대신 className, onclick대신 onClick을 사용

export default function FunctionComponent(props) {
  const student = '홍길동';
  const { name } = props;
  
  const styles = {
    backgroundColor: 'black',
    color: 'yellow',
    fontSize: '48px',
  };
  
  return (
    <div>
      <h1>Hi {student}</h1>
      <p>여긴 FunctionComponent</p>
      {/* <p>
        새로운 컴포넌트의 이름은 <b>{props.name}</b>
      </p> */}
      <p>
        현재 컴포넌트의 이름은 <b>{name}</b>
      </p>
      
      {/* 스타일을 변수에 저장해서 적용 */}
      <div style={styles}>스타일 적용</div>
      
      {/* 인라인 스타일 적용 방법 */}
      <div style={{backgroundColor: 'yellow', color: 'black', fontSize: '48px'}}>
      인라인 스타일 적용
      </div>
      
      {/* className */}
      <div className="test">{title}</div>
      
      {/* onClick */}
      <button onClick=test(){console.log('OO')}>콘솔 메세지</button>
      
    </div>
  );
}

 

 

7. 가상 돔

React에서 가상 돔은 실제 돔(Document Object Model)과 동기화되는 가상의 돔 구조입니다. React는 변경된 데이터를 먼저 가상 돔에 반영하고, 실제 돔과의 차이를 최소화하여 효율적으로 렌더링을 하고 그 결과로 성능 최적화에 기여합니다.

 

 

8. 위 내용들을 포함한 전체적인 리액트 기초 동작원리

이분보다 잘 정리할 자신이 없습니다.

https://curryyou.tistory.com/484

[React] 리액트 기초 동작 원리(Feat. Virtual DOM : 가상돔이란?)