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

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy

---

1. 리액트를 사용하는 이유?

- 리액트는 모든 요소들이 컴포넌트로 이루어져 있음

* 컴포넌트 : 재사용이 가능하고, 우려사항을 분리할 수 있음(=반복이 없고, 코드를 작고 관리할 수 있는 규모로 유지)

👉 생산성과 유지보수가 용이하다

👉 복잡하고 동적인 웹 어플리케이션에서 ui를 동적으로 나타내기 위해서는 많은 상태를 관리해야하는 부담이 생기는데 react가 이것을 해결해 준다.

👉 virtual DOM을 이용한 빠른 렌더링이 가능하다. 

 

* react/vue/angular중 선택해야하는 경우 

[React] 내가 React를 선택한 이유 (tistory.com)

[React] 내가 React를 선택한 이유

위 글에 잘 설명되어 있다.

 

 

2. 리액트 특징 : 선언적 방식

- 프로그램이 어떤 방법으로(how) 해야 하는 지를 나타내기 보다는 무엇과(what) 같은지를 설명 하는 경우 "선언형" 방식이라고 한다.

- 리액트는 명령형 방식이 아닌 선언형 방식으로 작성된다.

- 리액트가 선호하는 타겟 상대를 정한 뒤에 책임지고 실제 돔 지시를 생성하고 실행하는 것

 

3. 리액트 프로젝트 만들기

1) node.js를 설치한다.

2) 아래와 같이 입력한다.

npx create-react-app my-app // my-app은 프로젝트 이름
cd my-app
npm start

 

4. 리액트 시작

- 리액트는 자바스크립트로 이루어져있다. 

- 리액트를 실행하면 index.js 파일이 실행된다.(★★★★★★)

 

- ReactDOM객체의 메소드에는 render가 있다. 두번째 매개변수로 디폴트 자바스크립트 돔 api를 가진다.

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

 

5. JSX란?

- html 코드를 js로 받는 문법

 

6. 컴포넌트 만들기

- 파일 확장자는 js

- 컴포넌트는 단순 자바스크립트 함수 

- 컴포넌트 이름은 대문자로 시작해야함

- html 코드를 리턴함 

- 반드시 하나의 루트 요소만 가져야 한다 

- export를 이용하여 다른 파일로 내보내야됨 (ex) App.js)

// ExpenseItem.js
function ExpenseItem() { 
  return <h2>안녕하세요</h2>
}
  
export default ExpenseItem;

 

7. css 추가하기

- 단순히 css파일을 만들어서 js 파일에 import 해주면 됨

 

8. 동적 데이터 추가하기

- jsx가 js와 비슷한 문법으로 이뤄져 있어서 일반 js 구문도 쓸 수 있음

- 예를 들어 date 객체를 추가하고 싶으면

const expenseDate = new Date(2021,2,28);

위와 같이 추가가 가능하다. 

 

- 리턴문 안에서 중괄호{} 를 이용하여 js 구문을 사용할 수 있다.

// ExpenseItem.js
function ExpenseItem() { 
  return (
    <div>
      {1+1}  // 2가 출력됨
    </div>
  );
}
  
export default ExpenseItem;

 

* 날짜객체를 출력하려면 string으로 바꿔줘야한다.

expenseDate.toISOString()

 

9. props

- props를 이용하여 데이터를 컴포넌트 맞춤으로 보낼 수 있다. 

- 컴포넌트사이 데이터를 전달할 수 있는 방법임

 

1) 사용 방법

- 상위 컴포넌트에서 하위 컴포넌트의 props 값을 지정한다.

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

- 하위컴포넌트에서 props값을 불러온다.

// ExpenseItem.js
function ExpenseItem(props) { //매개변수로 props를 지정 
  return (
    <div>
      {props.title}
      {props.amount}
    </div>
  );
}
  
export default ExpenseItem;

 

10. 일반 자바스크립트 구문 활용

1) toLocaleString 함수 : 숫자의 사용 언어에 따른 표현을 포함한 문자열을 반환한다.

props.date.toLocaleString('en-US', {month: 'long' }}

 

11. 컴포지션

- 작은 빌딩 블록들을 모아서 사용자 인터페이스를 만드는 것을 컴포지션이라고 함

- 스타일 컴포넌트를 지정하여 만들 수 있다. (래퍼 컴포넌트)

// 래퍼 컴포넌트를 적용할 컴포넌트

function Item(){
  return(
    <Rap className='클래스 이름' />
      <div>하위요소</div>
      <div>하위요소</div>
      <div>하위요소</div>
    </Rap>
  );
}

// Rapper Component

function Rap(props) {
  const classes = 'rap' + props.className;
  return <div className={classes}>{props.children}</div> 
}

상위 컴포넌트 안에 있는 하위 요소들이 props.children으로 가져와 진다.

감싸는 컴포넌트와 감싸지는 컴포넌트 클래스이름을 설정하여 스타일을 설정하고 싶으면

상위 컴포넌트에서 래퍼 컴포넌트에 클래스 이름을 설정하고, 위와 같이 하면 

클래스 이름이 'rap 클래스 이름' 으로 설정되어 스타일을 중복 지정할 수 있다.

* 클래스에서 띄어쓰기의 의미는 두 클래스 이름을 가지게 되는것 원래는 공백 허용 안됨

 

공통적으로 지정하고 싶은 속성은 래퍼 컴포넌트에,

맞춤형으로 하고 싶은 스타일을 감싸지는 컴포넌트에 따로 지정하면됨

 

 

12. jsx 자세히 보기

- 예전에는 jsx사용하는 부분이면 react에서 react를 불러와야 됐음

- 이제는 안해도됨 이유는 최신 react 프로젝트 세트업이 그 일을 처리해주기 때문 

* react가 하나의 루트 요소만 반환하는 이유? 원래는 React.createElement로 내용을 만드는 건데 

이 메소드는 하나의 요소만 반환이 가능하기 때문이다. 하나의 요소에 대해 자식요소를 만들어 가는 것이기 때문에 

무조건 루트요소가 필요