[개발자되기: React] Day-25

React

FE개발을 위한 자바스크립트 오픈소스 라이브러리

3가지 특징

선언형(Declarative)

html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함

컴포넌트 기반 (Component-based)

하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발 가능

장점:
독립성 => 기능 작동에 집중하여 개발 가능
재사용성 => 유지보수, 유닛테스트 편리

범용성 (Learn once, Write anywhere)

자바스크립트 프로젝트 어디에든 유연하게 적용 가능. Facebook에서 관리되어 안정적이고 가장 유명하며 리액트 네이티브로 모바일 개발도 가능

JSX (JavaScript XML)

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법임

Babel

JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 해주면 JavaScript를 브라우저가 읽고 화면에 렌더링 해줄 수 있음

JSX 규칙

하나의 엘리먼트 안에 모든 엘리먼트를 포함시켜야 함

<div> {/*opening tag */}
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div> {/*closing tag */}

class => className 으로 표기

중괄호 {} 이용

자바스크립트 써야하는 경우 중괄호 이용해야함. 중괄호 쓰지 않으면 일반 텍스트로 인식하게 됨

function App() {
  const name = 'Kyoorim LEE;;
  
  return (
    <div>
      Hello, {name}! {/**/}
    </div>
    );
}

사용자정의 컴포넌트 대문자로 시작

React엘리먼트가 JSX로 작성되면 대문자로 시작해야함. 소문자로 시작하면 일반적인 html엘리먼트로 인식하게 됨

function Hello() {
  return <div>Hello!</div>
}
function Helloworld () {
  return <Hello />; // 대문자로 시작 ! 
}

삼항연산자 사용

조건부 렌더링으로 삼항연산자 사용

<input
  value={flipped ? amount : Math.round(amount / 60)} // minutes를 썼을 때만 발생해야함, hours를 쓰면 hours가 나와야함
  // flipped ?가 참인가 거짓인가  true일때 넣어주는 값: false일때 넣어주는 값
  onChange={onChange}
  disabled={!flipped} // flipped가 false이면 disabled가 true이다 
  />

map()

여러개의 html 엘리먼트를 표시할 때는 "map()" 함수를 사용함
map함수 사용 시 반드시 key JSX 속성을 넣어야함
그렇지 않으면 리스트 각 항목에 key를 넣어야 한다는 경고가 표시됨

<⬆︎ 코드스테이츠 예제>

JSX 예제

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // TODO: postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시해보세요.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(/* TODO */(banana) => {
        return (
          <div key = {banana.id}>
            <h3>{banana.title}</h3>
            <p>{banana.content}</p>
          </div>
        );
      })}
    </div>
  );
}

Component-Based

컴포넌트란?

하나의 기능 구현하기 위한 여러 종류의 코드 묶음
UI를 구성하는 필수 요소
컴포넌트를 여러개 만들어 조합하면 Application이 됨