[포스코x코딩온] 웹 풀스택 과정 12주차 회고 | React

 

React 시작!

 

🚩 React JS

• '동적' 사용자 인터페이스를 만들기 위한 목적으로, 페이스북에서 만든 오픈소스 JavaScript 라이브러리이다.
• Vue.js도 많이 사용되고 있지만, React JS가 더 많은 국가에서 보편적으로 사용되고 있다.

🚩 React 특징

특징 1) 단방향 Data Flow

React에서 데이터는 단방향으로 흐름 (양방향 X)

특징 2) Component 기반 구조

React는 UI(View)를 여러 독립적인 단위의 소프트웨어 모듈인 Component로 쪼개어 만든다.
(즉, 한 페이지 내에서 여러 부분을 Component로 만들고, 이를 조립하여 화면을 구성하는 것)

• 기능단위, UI 단위로 캡슐화하여 코드를 관리하기 때문에 재사용성이 높다. (캡슐화: 데이터와 데이터를 처리하는 행위를 묶고, 외부에는 그 행위를 보여주지 않는 것)
• 코드를 반복할 필요없이, Component만 import하여 사용하면 된다.
• Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉬우며, 유지보수, 관리가 용이하다.

특징 3) Virtual DOM

React는 DOM Tree 구조와 같은 구조를 virtual DOM으로 갖고 있다.
이벤트가 발생할 때마다 virtual DOM을 만들고, 다시 그리는 경우에는 실제와 전후 상태를 계속 비교하여, 앱의 효율성과 속도를 개선할 수 있다. (다시 모두 rendering 하는 것이 아니라, 바뀐 부분만)

특징 4) Props and State

• Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 (자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경이 가능함. 단방향의 Data Flow 이므로)
• State: 컴포넌트 내부에서 선언되고, 내부에서 값을 변경할 수 있다. 클래스형 컴포넌트에서만 사용 가능하며, 각각의 state는 독립적이다. (함수형 컴포넌트에서는 state 사용 X)

특징 5) JSX

JSX = Javascript + XML

 

🚩 React 프로젝트 생성하기

npx create-react-app 앱이름

※앱 이름에는 대문자 사용 불가 (대문자 대신 dash(-) 이용)

🚩 JSX 문법

💡 1) 고유한 최상위 요소가 있어야 한다.
형제가 없는 고유한 최상위요소(부모요소) 하나가 전체를 감싸는 형태를 가져야 한다.

function App() {
	return (
    <div>
    	<h1>Hello World</h1>
        <div>리액트 시작</div>
    </div>
    )
}

불필요한 태그가 생기는 것을 막기 위해 빈태그(<></>)를 사용할 수 있다.

function App() {
  return (
    <>
      	<h1>Hello World</h1>
        <div>리액트 시작</div>
    </>
  )
}

💡 2) 종료태그는 필수이다.
기존의 종료태그가 없는 태그를 사용하더라도, 종료 태그를 작성해야 한다. (or Self-closing)

<input></input>
//또는
<input />

💡 3) Style, HTML attribute에 camelCase를 이용한다.

function App () {
  const style = {
    backgroundColor: "blue",
    fontSize: "20px",
    textAlign: "center",
  }
  return (
    <>
    	<div className="클래스명"></div>
      <button onClick="Func()"></button>
    </>
  )
}

💡 4) 중괄호{ }를 이용하여 JS 문법을 사용할 수 있다.

function App() {
  const name = "홍길동";
  return (
      <div>{name} 반가워</div>
  )
}

💡 5) 계산을 다 한 후, 결과값을 변수에 담아서 JSX 문법에서 보여준다.

function App() {
  let flag = true;
  let txt = "";
  if (flag) txt = "True 입니다.";
  else txt = "False 입니다.";
  
  return (
    <div>{txt}</dib>
  )
}

💡 6) 중괄호{ } 안에서 삼항 연산자를 이용한다. (if나 for 사용X)

function App() {
  let flag = true;
  return (
    <div>
      {flag ? (<h1>True 입니다.</h1>):(<h1>False 입니다.</h1>)}
    </div>
  )
}

💡 7) 요소에 스타일을 적용할 때는, 객체 형태로 사용한다.

function App() {
  const styles = {
    backgroundColor: "yellow",
    color: "blue",
    fontSize: "48px",
  }
  return (
    <div style={styles}></div>
  )
}