리액트 입문 간단정리

리액트란?

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

리액트의 3가지 특징

• 선언형
  • 웹의 한 페이지를 보여주기 위해HTML, CSS, JS로 코드를 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
• 컴포넌트 기반
  • 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
  • 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문, 기능 자체에 집중해 개발할 수 있다.
    • 나중에 유지보수, 유닛테스트에도 장점
• 범용성
  • 기존 JavaScript 프로젝트 어디든 유연하게 적용이 가능
  • Facebook에서 관리를 하고 있어 안정적이고 유명하며, 리액트 네이티브로 모바일 개발도 가능

JSX란?

• React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
• JSX로 React 엘리먼트를 만들 수 있다.

JavaScript처럼 바로 브라우저에 적용이 가능할까?

• JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 코드는 아니다.
  • JSX > JS 로 변환을 해줘야하는데 이때 필요한 것이 Babel
  • ** JSX가 HTML처럼 생겼지만 HTML이 아니기때문

Babel?

• JSX를 JS로 컴파일(변환)해주는 역할을 한다

컴포넌트?

• DOM에서는 JavaScript와 HTML을 연결하기 위한 작업(inline, script태그)이 필요했었다.
• 하지만 React에서는 DOM 코드보다 명시적으로 코드를 작성할 수 있다.
• JavaScript 문법과 HTML 파일을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.

컴포넌트를 어디에 쓸까     

  컴포넌트 기반 X

       화면의 UI 변경시 HTML로 구조를 변경하고, CSS를 수정하고, JS가 변경된 구조와 스타일에 맞춰 DOM을 조작하게 수정해야함

  컴포넌트 기반 개발

       기존 컴포넌트의 위치만 수정

       컴포넌트 기반 개발은 웹 앱에서 1 기능 > 1 컴포넌트 작성이 권장

         컴포넌트간 의존성⬇️, 독립적으로 작동

JSX없이 React가 사용가능할까?

• 사용은 가능하지만 복잡성이 올라가고 그만큼 코드 가독성은 떨어진다

return React.createElement(
		"h1", null, `Hello, ${formatName(user )}!`

)

JSX의 규칙

규칙 1. 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.

이렇게 쓰는것이 아니다.

<div>
  <h1>Hello</h1>
</div>
<div>
  <h2>World</h2>
</div>

정답

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div>

규칙 2. element class 사용 시, className으로 표기

<div class="greeting">Hello!</div>

** 위 처럼 작성한다면 React에서는 이를 html 클래스 속성 대신 JavaScript 클래스로 받아들인다.
>>

<div className="greeting">Hello!</div>

규칙 3. JSX에서 JavaScript를 쓰고자 한다면 중괄호를 이용하자

function App() {
	const name = 'ok soosoo';

return (
  <div>
    Hello, {name}! 
  </div>	
  );
}

규칙 4. 사용자 정의 컴포넌트는 대문자로 시작

function hello() {

return (
  <div>
    Hello, {name}! 
  </div>	
  );
}

소문자로 시작하게 되면 HTML 엘리먼트로 인식 >> 

function Hello() {

return (
  <div>
    Hello, {name}! 
  </div>	
  );
}

대문자로 작성된 JSX 컴포넌트 >> 사용자 정의 컴포넌트라고 부름

규칙 5. 조건부 렌더링에는 if문이 아니라 삼항연산자(?)를 사용해야 한다.

<div>
  {
    (1+1 === 2) ? (<p>정답</p>) : (<p>땡</p>)
  }

</div>

규칙 6. 여러개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용한다.

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcorn to Oksoosoo blog'},
  {id: 2, title: 'Lorem Ipsum', content: 'Lorem ipsum dolor sit amet'}
]

function Blog() {
  const content = posts.map((post) => // map함수를 사용할 땐
    <div key={post.id}> // 반드시 'key' JSX속성을 넣어야 함
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
);

return (
  <div>
    {content}
  </div>
  )
}

** map함수를 사용할 때는 반드시 key 속성을 넣어야 한다.

React에서 map 사용법

const posts = [
    {id: 1, title: 'Hello World', content: 'Welcorn to Oksoosoo blog'},
    {id: 2, title: 'Lorem Ipsum', content: 'Lorem ipsum dolor sit amet'},
    {id: 3, title: 'reusable component', content: 'render easy with reusable component.' },
    // ...
    {id: 100, title: 'I just got hired!', content: 'OMG!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

>> 배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map)한다.

const posts = [
    {id: 1, title: 'Hello World', content: 'Welcorn to Oksoosoo blog'},
    {id: 2, title: 'Lorem Ipsum', content: 'Lorem ipsum dolor sit amet'},
    {id: 3, title : 'reusable component', content: 'render easy with reusable component.' },
    // ...
    {id: 100, title: 'I just got hired!', content: 'OMG!' },
  ];

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

위에서 map 함수 사용시 key를 꼭 넣어야 한다고 했었다.
key속성의 위치는 map 메서드 내부에 있는 첫 엘리먼트에 넣으면 된다.

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

key속성은 가능하면 데이터에서 제공하는 고유의 id를 할당해야 한다.
마땅치 않으면 배열 인덱스를 넣을 수도 있지만 이건 마지막 수단으로만 사용한다.

Create React App

React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

명령어

npx create-react-app@latest 폴더이름

package.json파일 내 {…, “script”: {… , “start“ : "react-scripts start“, … }, …}

• react-scripts start와 npm run start는 똑같은 명령어

import 키워드들을 통해 node.js에 설치된 패키지를 불러오거나 src폴더 내 파일을 불러올 수 있다.

import App from './app'; // app파일 불러오기
app(); // app 파일 호출