[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 17일차 - 리액트(1)

 

 

🤔 리액트는 뭐지? 

👉 사용자의 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.

👉 페이스북이 개발하고 유지 관리하며 개발자들이 웹 페이지 혹은 앱의 복잡한 사용자 인터페이스를 구성할 수 있도록 지원한다.

👉 Vue와 비교했을 때 라이브러리로 분류되는 이유는 프레임워크가 제공하는 전체적인 기능 집합을 제공하지 않기 때문이다. 예를 들어, React는 라우팅, HTTP 요청, form validation 등의 기능을 직접 제공하지 않는다. 

 

📖 리액트 특징

👉 컴포넌트 기반: 컴포넌트라는 개념을 사용한다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각 컴포넌트는 자체 로직을 가지며, 그 로직은 JavaScript 함수를 통해 작성된다. 이로 인해 UI를 재사용 가능한 개별적인 조각으로 분리하여 쉽게 이해하고 수정하며, 테스트 가능하며 화면을 업데이트 하는데 최적화 되어 있다. 

 

👉 선언적 접근: 개발자가 어떤 과정을 거쳐서 원하는 결과를 도출해야 하는지에 대해 상세히 설명 필요 없이, 원하는 결과를 선언하면 React가 이를 도달하도록 적절한 JavaScript 코드를 생성한다.

 

👉 가상 돔: 리액트는 가상돔이라는 개념을 도입했는데, 실제 DOM을 직접 조작하는 대신, React는 메모리에 가상의 DOM을 생성하고 변경사항이 있을 때 이 가상의 DOM을 실제 DOM과 비교하여 최소한의 변경만을 반영한다. 

 

👉 리액트 Hooks: 리액의 최신 기능 중 하나로, 클래스 컴포넌트의 기능을 함수형 컴포넌트에서 사용할 수 있다. state 관리나 생명주기 메소드 등을 함수형 컴포넌트에서 사용 가능하다. 

 

1️⃣ createElement 함수

👉 이 함수를 사용하여 React 엘리먼트를 만들 수 있다.

👉 React 엘리먼트는 React에서 UI를 구성하는 데 사용되는 작은 조각이다.

👉 첫 번째 인자는 생성할 요소의 타임(Ex. div, h1, p...)

👉 두 번째 인자는 요소의 속성(Ex. className, style, onClick)과 같은 속성

👉 세 번째 인수는 요소의 자식(children) - 요소 내부에 다른 요소나 텍스트를 포함시킬 수 있다.  

const container = React.createElement("div", null, "hello");

 

2️⃣ JSX(JS + XML)

👉 const element = <h1>hello world</h1>와 같은 형태로 우리가 만들고자 하는 컴포넌트 안에 들어가는 HTML 요소들을, JS 안에서 실제 HTML의 모습과 동일하게 사용할 수 있도록 지원한다.

👉 일반적으로 HTML과 매우 유사한 문법을 가지고, 브라우저에서 바로 실행할 수 없지만, Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환된다. 

👉 자바스크립트 표현식을 중괄호 `{}`로 감싸서 직접 삽입할 수 있다.

function App() {
  const name = 'React';
  return <h1>Hello, {name}</h1>;
}

 

3️⃣ React 기본구조

<div id='root'></div>
  <script type='text/babel'>
    function Function() {
       return()
    }
    // 함수의 첫글자는 대문자
    ReactDOM.render(<Function />, root)
  </script>

 

4️⃣ UseState

👉 기본적인 상태 관리를 위한 Hook이다. 컴포넌트의 상태를 관리하고 해당 상태를 업데이트할 수 있도록 도와준다.

👉 useState는 하나의 인자를 받는데, 이는 상태의 초기값이다. 반환 값은 배열로, 첫 번째 요소는 상태변수, 두 번째 요소는 해당 상태를 업데이트하는 함수이다.

const [count, setCount] = React.useState(0);

 

👉 사용 예시

function App() {

  let [메뉴, 메뉴변경] = React.useState(["김밥", "라면", "떡볶이"]);
  let [좋아요, 좋아요변경] = React.useState(0);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>
      <div className="list">
        <h4> { 메뉴[0] } <span onClick={ () => { 좋아요변경(좋아요+1) } }>👍</span> { 좋아요 } </h4>
        <p>1월 10일</p>
      </div>
      <div className="list">
        <h4> { 메뉴[1] } </h4>
        <p>1월 10일</p>
      </div>
      <div className="list">
        <h4> { 메뉴[2] } </h4>
        <p>1월 10일</p>
      </div>
    </div>
  );
}

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.