1. 리액트와 컴포넌트

1-1. 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// Welcome 컴포넌트는 name이라는 props를 받아 화면에 텍스트를 출력한다.
-----------------------------------------------

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}
// App 컴포넌트가 Welcome 컴포넌트를 두 번 호출하여 각각 다른 name 값을 전달하고 있는 상황
// 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식으로 컴포넌트 간의 데이터 흐름을 구성할 수 있다.

• 리액트 애플리케이션을 구성하는 독립적이고 재사용 가능한 코드의 블록
• 컴포넌트는 HTML과 같은 구조를 리턴하여 화면에 표시하며, UI의 한 부분을 캡슐화하고 재사용성을 높이는 역할을 한다.

장점
1. 독립적이기 때문에 여러 곳에서 재사용가능
2. 여러 컴포넌트를 조합해 큰 UI 제작가능
3.

1-2. JSX (Javascript XML)

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
// JSX를 사용해서 name 변수의 값을 포함한 h1 태그를 생성한 코드

const element = React.createElement('h1', null, `Hello, ${name}!`);
---------------------------------------------------------------------
const user = { firstName: 'Alice', lastName: 'Johnson' };
const element = <h1>Hello, {user.firstName} {user.lastName}!</h1>;

• 리액트에서 HTML과 유사한 문법을 사용하여 UI를 정의할 수 있는 문법이다.
• JSX는 자바스크립트와 HTML을 결합한 형태로, UI 구조를 선언적으로 작성할 수 있게 도와준다.
• 리액트는 JSX 코드를 받아 자바스크립트로 변환하여 처리한다.(bavel 사용)
  

JSX 규칙

1 ) 모든 태그는 닫혀 있어야 함: JSX는 자바스크립트 코드로 변환되므로, 모든 태그는 반드시 닫혀야 하며 빈 태그는 <input /> 처럼 작성해야 한다.

2 ) 모든 태그는 닫혀 있어야 함: JSX는 자바스크립트 코드로 변환되므로, 모든 태그는 반드시 닫혀야 합니다. 빈 태그는 <input />처럼 작성해야 합니다.

3 ) class는 자바스크립트의 예약어이기 때문에 JSX에서는 HTML의 class 대신 className을 사용해야 합니다.

babel

babeljs.io

• 자바스크립트 컴파일러로, 최신 자바스크립트(ES6+) 코드를 구형 브라우저나 환경에서도 호환될 수 있도록 구버전 자바스크립트로 변환해주는 도구

주요기능

1. ES6, ES7, ES8 등 최신 자바스크립트 문법과 기능(예: 화살표 함수, let과 const, 비동기 함수 등)을 구형 자바스크립트로 변환하여, 다양한 브라우저에서 호환되도록 함.

2. 리액트에서 사용하는 JSX 문법을 자바스크립트로 변환 JSX는 자바스크립트 코드 내에서 HTML과 유사한 구조를 작성할 수 있게 해주며, Babel은 이를 React.createElement 호출로 변환한다.

3. Babel은 다양한 플러그인과 프리셋을 통해 코드 변환 기능을 확장할 수 있다.

---

2. state와 props

변수만드는법비교

let count = 0
const count = 0
--------------------------------------
const [count,setCount] = useState(0)

// const [변수명, 변수바꿀함수] = 변수만들기(초기값)

변수바꾸는법비교

let count = 0
const count = 0
--------------------------------------
const [count,setCount] = useState(0)

// setCount안에 바꿀 값을 넣어줘야한다. ex) setCount(5)

2-1. state

function Counter() {
  const [count, setCount] = useState(0); // state 선언

  const increment = () => {
    setCount(count + 1); // state 변경
  };

  return (
    <div>
      <p>{count}</p> {/* state가 변경되면 값이 자동으로 업데이트 */}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

-state는 컴포넌트 내부에서 관리되는 동적인 데이터를 말하며, 해당 컴포넌트에서 직접 수정이 가능하다. 주로 사용자 상호작용이나 이벤트에 따라 값이 변경되며, 리액트는 state가 변경될 때마다 컴포넌트를 다시 렌더링하여 UI를 업데이트하는 장점이 있다.

state 사용하는 이유

1 ) 자동으로 UI를 리렌더링

• let이나 const로 정의한 변수는 값을 바꾸더라도, 값이 바뀐 사실을 리액트가 인지하지 못하기 때문에 UI가 자동으로 업데이트되지 않는다.
• 그러나, state 변수는 리액트에서 상태 변화가 감지되면 자동으로 해당 컴포넌트가 다시 렌더링되도록 설계되어 있다. 즉, 사용자 인터페이스(UI)는 사용자가 볼 수 있도록 즉시 업데이트된다.

2 ) 여러 컴포넌트에 상태를 공유하기 용이함

• state 변수는 부모-자식 관계의 여러 컴포넌트 간에 쉽게 전달될 수 있다. 예를 들어, 부모 컴포넌트에서 관리하는 상태를 자식 컴포넌트로 전달하면, 상태가 변할 때마다 자식 컴포넌트 역시 자동으로 UI를 갱신한다.

3 ) 리액트의 생명주기와 통합

• 리액트 컴포넌트의 생명주기와 통합되어 있는 state는 상태가 변할 때 리액트가 알아서 필요할 때마다 적절한 시점에 렌더링하거나 업데이트할 수 있다.
• 그래서 컴포넌트가 마운트(생성)될 때나 언마운트(제거)될 때 상태에 따라 어떤 작업을 수행하는 것이 용이하다.

2-2. props (properties)

function Greeting({ name }) {  // props를 사용하여 데이터 받기
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;  // props 전달
}
// App 컴포넌트는 Greeting 컴포넌트에 name이라는 props를 전달하고, Greeting은 이를 받아 화면에 표시한다.

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터다. 컴포넌트 간에 데이터를 전달할 때 사용하고 자식 컴포넌트는 props를 통해 전달된 데이터를 수정할 수 없다.

• 오직 읽기만 가능합니다.

• 쉽게 정리하면 이렇게 된다.

1. 부모 컴포넌트에서 자식 컴포넌트로 전달
2. 자식 컴포넌트는 전달받은 props을 변경 X
3. 여러 컴포넌트 간 데이터를 공유할 때 사용
4. 동일한 컴포넌트를 다양한 값으로 재사용가능

---

3.버추얼돔 (Virtual DOM)

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
// 버튼을 클릭하면 상태가 변경되어 count 값이 증가한다. 
// 리액트는 새로운 버추얼 DOM을 생성하고, 변경된 count 값에 따라 UI를 업데이트한다.

• 애플리케이션의 반응성을 높이고 불필요한 DOM 조작을 최소화하여, UI 업데이트를 효율적으로 관리하고, 리렌더링 성능을 향상시키는 것

DOM과 버추얼 DOM의 차이

DOM

• 웹 브라우저에서 문서 객체 모델(Document Object Model)을 사용하여 HTML 문서의 구조를 표현한다. 실제 DOM은 동적으로 수정할 수 있지만, 자주 업데이트하거나 변경할 때 성능 저하가 발생할 수 있다.

버추얼 DOM

• 실제 DOM의 가벼운 복제본이다. 자바스크립트 객체로 구현되며, 실제 DOM에 직접적으로 접근하지 않고 메모리에서 UI를 구성, 이 방식은 UI의 변경사항을 효율적으로 관리할 수 있게 해준다.

장점

1 ) 버추얼 DOM을 사용하면 실제 DOM 조작을 최소화하여 애플리케이션의 성능을 크게 향상시킬 수 있다.

2 ) 변경된 부분만을 업데이트함으로써 UI의 응답성이 개선된다.

3 ) 컴포넌트 기반 아키텍처와 함께 버추얼 DOM을 사용하면 UI의 상태를 관리하고 업데이트하는 코드가 더 깔끔하고 유지보수가 쉬워진다.

---