TIL.1) React?_React

🚨 Caution 🚨

해당 내용은 wecode에서 학습하며 정리한 내용입니다.
필자가 이해한 부분을 바탕으로 작성한 글이기 때문에 실제 내용들과 다소 차이가 있을 수 있습니다.
이 점 유의해서 읽어 주시면 감사하겠습니다.

내용에 대한 친절한 피드백은 언제나 감사합니다.

💡 그래서 React가 뭐냐?

맨 처음 웹이 나왔을 때와 현재의 웹을 비교한다면
말도 안되게 변화된 모습들을 볼 수가 있다.

사용자 입장에서는 빠른 변화와 더불어서 다양한 기능들을 담고 있는 웹을 사용하는게
너무나 편하고 재밌지만, 만드는 입장에서는 죽을맛일 것이다.
개발자가 죽겠다고 다시 예전으로 돌아가기에는 너무나 많은 변화를 가져왔기에
그 변화에 발을 맞춰야 할 수 밖에 없는 상황이겠다.

그런 변화들을 가져다 주는 데이터와 코드에 대한 유지보수를 용이하게 하기 위해
태어난 게 React 라고 보면 되겠다.
React는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다.
여러 변화들을 가상돔을 통해 UI를 빠르게 업데이트 한다.

🖥 작업 환경 설정

Node.js

• JS가 브라우저 밖에서도 동작하게 하는 환경
• Node.js를 설치하면 npm 역시 자동으로 설치가 된다.

npm (node package manager)

• 다양한 패키지를 설치하고 버전을 관리할 수 있는 것

CRA (Create-React-App)

• 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

💡 React code basic

▪️ JSX

JSX는 리액트에서 사용하는 JS 확장문법인데,
보면 HTML 같기도 하고, JS 같기도 한 문법이다.

몇 가지 예를 보면서 특징들을 살펴보자.

const hi = <p>Hello, world!</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className = "list-item">programming</li>
};

• 태그에 속성을 주고 싶다면 HTML의 코드 작성 방법처럼
  쌍따옴표 ("")를 이용해 줄 수 있지만 HTML의 속성명과는 다소 다를 수 있기에
  이 부분은 React 공식문서를 참조하는게 좋겠다.

const list = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

• 중첩된 요소를 만드려고 할 때는 반드시 소괄호 ()를 사용해서 감싸주어야 하고,
  처음 요소를 자식요소부터 나오지 말고, 반드시 감싸주는 태그가 있어야 한다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('hello')
);

• HTML 문서에 대한 접근으로 화면에 나오게 하기 위해서는
  ReactDOM.render 라는 함수를 사용해야 한다.
  첫번째 인자에는 표현 될 요소가
  두번째 인자에는 첫번째 인자가 표시가 될 부모 요소를 선택한다.

▪️ Component

- 특징

Component는 재활용이 가능한 UI의 구성 단위다
component를 사용하게 되면 코드 유지보수에도 좋고
해당 페이지들을 어떻게 구성했는지 확인이 가능하다.

- 선언 방식

선언 방식에는 두 가지 방식이 있다. ( class형 / function형 )

• class 형

import React from 'react'

class Component extends React.Component {
  render() {
    return (
	<div>
	  <h1>This is Class Component!</h1>
	</div>
    )
  }
}

export default Component

• function 형

import React from 'react'

const Component = () => {
  return (
	<div>
	  <h1>This is Functional Component!</h1>
	</div>
	)
};

export default Component

현재는 function형으로 대부분의 컴포넌트가 작성 되지만
리액트를 처음 배우는 단계에서는 class형 컴포넌트로 작성해
여러 개념들을 학습한 뒤에 function형을 공부하는 것이 좋겠다.