(TIL) D+25 React Intro

리액트 개요

• 선언형(declarative)
  • 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언편 프로그래밍 지향
• 컴포넌트 기반
  • 컴포넌트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것
  • 독립성(기능 작동에 집중), 재사용성(유지보수, 유닛테스트)
• 범용성

JSX

• JavaScript 를 확장한 문법
• 브라우저에서 바로 실행이 안되서 ‘Babel’을 통해서 JS 코드로 컴파일한후 화면에 렌더링 됨
• React DOM에 배치하기 위해 css 와 jsx 문법만 있으면 됨
• 한 개의 JavaScript 파일 안에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리
• DOM에서 Javascript 와 함께 사요하기 위해 HTML을 연결하기 위한 작업 필요

JSX 주요 문법

• 최상위에서 opening tag와 closing tag로 감싸주어야 합니다. ⇒ ?? react fragment ??
• class 속성 지정시 : className 으로 표기
• JSX 에서 JS사용시 중괄호 { } 사용해야 함, 아닐 경우 일반 텍스트로 인식함
• react 엘리먼트, 즉 사용자 정의 컴포넌트 함수는 대문자로 시작
• 조건부 렌더링에는 if 문이 아닌 삼항연산자 사용해야 함 ⇒ jsx에서 javascript를 쓰려면 {자바스크립트 표현식} , if 문은 표현식이 아니기 때문에 중괄호 안에 쓸 수 없다!! 그 대체재가 삼항연산자임!!
  
• 여러개의 html 엘리먼트 표시할 때, map() 함수 이용
  • 이때 key 속성을 넣어줘야 하며 안넣으면 계속 경고 표시 나옴 (key는 데이터가 가지는 고유한 id값(식별자))
  • 이때 고유한 아이디를 써야함! (idx 도 지양)
  • key는 변하지 않고, 예상 가능하며, 유일한 값을 지정해야 함
  • 하지만 고유한 id값이 없을 경우 배열의 요소가 가지는 인덱스를 이용합니다. 다만, 인덱스를 활용은 최후의 수단(as a last resort)으로 사용
  • 이게 유지되어야 virtual DOM에서 리렌더링을 안해서 성능 저하를 막을 수 있음
• 화살표함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야함 return이 없다면 undefined를 반환하게 됨
  • 화살표함수에서 ()를 사용하면 ()안의 값이 return 값이 됨

컴포넌트 기반이란?

• 컴포넌트
  • 하나의 기능 구현을 위한 여러 종류의 코드 묶음, UI를 구성하는 필수 요소
  • 각각 독립적인 기능을 가지며 ui의 한 부분을 담당하기도 하는 이런 컴포넌트를 여러개 만들고 조합해서 앱을 만듦
  • 최상위 컴포넌트는 앱 내부의 root 가 되는 근원 역할을 하며 다른 자식 컴포넌트를 가지게 됨(계층적 구조)

배열내 요소를 랜덤하게 선택하도록 한 코드

import './App.css';

function App() {

  const proverbs = ["좌절감으로 배움을 늦추지 마라", "일찍 일어나는 새가 벌레를 잡는다", "Stay Hungry", "하다보면 된다"]

  const getRandomIndex = (length) => {
    return parseInt(Math.random() * length);   
  }
  // 이렇게 난수 범위를 생성해서 배열의 길이에서 랜덤한 정수(인덱스 번호)가 나오도록 한거네!!

  return (
    <div className="App">
      <header className="App-header">
        <p>파일을 고치고 저장하면 새로운 명언을 볼 수 있습니다.</p>
        {proverbs[getRandomIndex(proverbs.length)]}
      </header>
    </div>
  );
}

export default App;

레퍼런스

• 난수의 생성, 범위를 지정한 난수 생성하기(유용) : https://hianna.tistory.com/454
• parseInt()와 Math.floor()의 차이 : https://velog.io/@mnmm/js-parseint-mathfloor