[엘리스 SW 엔지니어 트랙 6기] 10주차 회고(10/16 - 10/20)

 

📌 2주 동안의 1차 팀프로젝트가 끝나고 다시 이론/실습 강의 기간이 시작되었다.
1차 프로젝트 때는 전체 흐름을 알기 위해 백엔드를 경험해봤는데 그러다보니 흥미가 생겼다.
백엔드 지식이 많이 부족해서 백엔드 관련된 정보들도 시간날 때마다 공부를 같이 해보려고 한다.
이번 주부터는 핵심 프론트엔드를 배우는데, 너무 배우고 싶었던 React를 기초부터 배우게 된다.
그리고 다음 주부터 2차 스터디가 시작된다. 2차 스터디도 팀프로젝트 스터디로 열심히 해볼 생각이다.

 

🍒 React

 

React란?

React(리액트)란 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리를 말한다.

React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.

React는 사용자와의 소통을 UI로 쉽게 구현하고, 대규모의 웹페이지를 관리하기 위해 사용한다.

✔️ Component - 리액트에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현, 재사용으로 개발시간 절약

✔️ Virtual DOM - 가상적인 표현을 메모리에 저장하고 React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념. 사용자 경험 향상, 개발자의 작업 속도 높임

✔️ JSX - 자바스크립트 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML과 유사함

 

Component

const App = () => {
	const text = "hello world";
	return <span>{text}</span>;
}

위와 같은 형태로 하나의 '블록'을 만들어서 필요한 곳에 '조립'하여 개발을 한다. 이러한 것을 '컴포넌트'라고 부른다.

Component란?

✔️ React에서 페이지를 구성하는 최소 단위

✔️ Component의 이름은 대문자로 시작

✔️ Class Component / Function Component로 나뉨

✔️ Controlled Component / Unconrolled Component

특징

✔️ 컴포넌트끼리 데이터를 주고받을 땐 Props

✔️ 컴포넌트 내에서 데이터를 관리할 땐 State

✔️ 데이터는 부모 -> 자식으로만 전달

 

JSX

const App = () => {
  return (
	<div>
		<p>Hi</p>
		<MyComponent>반가워</MyComponent>
	</div>
  );
}

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다.

HTML과 비슷하게 생겼으나 JavaScript이고, HTML과 다른 부분이 있다.

장점

✔️ 개발자 편의성 향상

✔️ 협업에 용이 / 생산성 향상

✔️ 문법 오류와 코드량 감소

특징

✔️ HTML 태그 내에 JavaScript 연산

✔️ class -> className

✔️ 스타일은 object로

✔️ 닫는 태그 필수

✔️ 최상단 element는 반드시 하나

 

Props

const element = <Introduce name="hamburger" />;
---
function Introduce(props) {
  return <h2>I am a {props.name}!</h2>;
}

props는 컴포넌트로 전달되는 매개변수라고 생각하면 된다. 컴포넌트에서 어떤 값을 전달받아 처리하고 싶다면 props를 이용한다. 그리고 컴포넌트를 호출할 때 props를 넘겨준다.

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript 요소라면 제한이 없다. 주로 Component의 '재사용'을 위해 사용한다.

✔️ 읽기 전용이기 때문에 props의 값을 임의로 변경해서 사용하지 X

✔️ 변경한다고 해서 자바스크립트 문법을 어긴다거나 에러가 발생하지는 않는다. 그러나 리액트가 프롭스의 변경을 감지하고 재렌더링을 하는 데 있어서 문제가 생길 수 있다.

✔️ 만약 변경하고 싶다면 새로운 변수 생성

 

State

import React from 'react';
import { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);

  return (
    <div className="App">
        <span>{count}회 클릭하였습니다.</span>
        <button onClick={() => {
            setCount((current) => {
                return current + 1;
            })
        }} >클릭</button>
    </div>
  );
}

export default App;

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.(데이터를 유동적으로 관리)

개발자가 의도한 동작에 의해 변할 수도 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.

State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

✔️ State 값을 직접 변경하게 되면 React가 컴포넌트를 다시 렌더링할 타이밍을 알아차리지 못하기 때문에 반드시 setState 함수를 이용해 값을 변경해야 한다. setState 함수가 호출될 때 React에게 재렌더링 명령이 내려진다.