youngmin.log

📝 JSX

JSX는 자바스크립트 XML의 약자.
즉, JSX는 자바스크립트를 확장한 문법이며, 그런 만큼, 자바스크립트와 사용법이 많이 비슷하다.
HTML을 React에서 쉽게 쓰기 위해 사용한다.

React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고, 두 가지를 포함한 "컴포넌트"를 사용

💡 표현식

JSX에서는 "중괄호( { } )"를 이용해, 사용 가능한 표현식들이 있다.

• 먼저, 중괄호를 이용해, HTML 내에 변수를 표현할 수 있다.

const name = 'elice';
const element = <h1> Hello, {name}! </h1>;

• 중괄호를 이용해, 함수 표현식을 넣는 것도 가능하다.

function greeting(){
  return "Hello, elice!";
}

const element = <h1>{greeting()}</h1>;

• 함수 내에서 표현식을 적용할 수도 있다.

function formatGreeting(name){
  return "Hello" + ' ' + name;
}

function getGreeting(user) {
  return <h1>Hello, {formatGreeting("elice!")}!</h1>;
}

💡 속성

• 큰 따옴표를 이용해 JSX의 속성을 지정할 수 있다.

const element = <a href = "https://kdt.elice.io/explore">엘리스로 이동</a>;

💡 자식 정의

• 자식 태그가 여러개 포함된 코드를 저장하기 위해서는, 자식 태그를 부모 태그로 감싸야 한다.

const element = (
  <div>
    <h1>Hello,</h1>
    <h2>elice!</h2>
  </div>
);

// <div> = 부모 태그
// <h1>,<h2> = 자식 태그

• 모든 태그는 반드시 닫혀야 한다. 다만, 원래 태그 이름을 맞춰서 </input> 처럼 닫아야 하지만
  이름은 생략하고 />만 이용해서 닫아도 괜찮다.

const element = <input type="text" />;

💡 객체 표현

React.createElement( ) 메소드를 이용하면, JSX 문법을 이용하지 않고, 객체로 표현할 수 있다.
두 코드는 문법이 다르지만, 같은 내용을 담고 있다.

• HTML 직접생성

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

• React.createElement( ) 로 생성

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

📝 엘리먼트 렌더링

Element ( 엘리먼트 ) : React 앱의 가장 작은 단위, 컴포넌트(Component의 구성요소)

쉽게 말하면, HTML 요소라고 할 수 있다.

Rendering( 렌더링 ) : 이러한 element를 화면에 그리는 것

💡 ReactDOM과 렌더링

• React는 가상(Virutal) DOM과 실제로, 표시되는 DOM을 유지한다.
• React는 실제 DOM을 추상화하여, 가상 DOM에 만들어두고, 데이터가 업데이트되면 한 번에 렌더링한다.
• 결과적으로, 계속해서 DOM을 렌더링하는 것보다 속도가 빠르다.

ReactDOM.render( ) : 렌더링 함수

• HTML 파일 안에 Id가 root인 요소가 있다고 해보자.

<div id="root"></div>

• 해당 HTML에 텍스트를 넣기 위해, ReactDOM.render( )을 이용해, 다음과 같이 렌더링 한다.

const element = <h1>Hello, elice</h1>;
ReactDOM.render(element, document.getElementById('root'));

// ReactDOM에 렌더링 할꺼다. element를, id = root 인 요소에다가 ~

💡 엘리먼트 업데이트

• 엘리먼트는 한 번 생성되면, 수정이 불가능한 불변 객체이다.
• 값을 변경하고 싶으면, 새로운 엘리먼트를 만들어 업데이트 해야 한다.

만약, 시간을 출력하는 기능을 구현하고 싶다면, 매 초마다 렌더링을 해줘야 할 것이다.

function tick() {
  const element = (
    <div>
      <h1>{new Date().toLocaleTimeString()}</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Date 객체의 toLocaleTimeString( ) 메소드를 이용하면, 시간을 반환해주는데, 실제로 시간이 변하는 것을 확인하기 위해서는 setInterval( ) 콜백을 이용해 tick을 계속 호출해야한다.
setInterval( )의 매개변수인 1000은 1초를 의미한다.

📝 개요

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

• React는 선언적이고, 효율적이고, 유연하다.
• 컴포넌트(Component)라는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.

💡 React를 왜 사용할까 ?

무엇보다, 동적(Dynamic)인 웹페이지를 만들기 위해서이다.
웹 페이지는 각 페이지마다 페이지를 관리해줘야 하고, 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 한다.

한 마디로, React를 사용하는 이유를 정리하자면,,

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

• React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높인다.
  Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다.
• React 컴포넌트의 재사용은 개발 시간을 크게 절약한다.
• 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다.
  단향향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미한다.
• 오픈소스이며, 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개된다.
• Hooks 이란 것을 이용해, 컴포넌트의 상태(State)를 쉽게 관리할 수 있다.

💡 React 파일 구조

📝 React 와 자바스크립트의 차이점

React는 앱 작성 방식을 정의하는 라이브러리다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른  UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.

반면 자바스크립트는 규칙을 설정하지 않는 스크립트언어이기 때문에, 이러한 순수 자바스크립트로 작성된 앱은 자유로울수는 있지만, 그만큼 정해진 것이 없기 때문에, 코드를 작성하다 길을 잃어버리기 쉽다.

이 둘의 대표적인 차이점을 잠깐 정리하자.

💡 1. 사용자 인터페이스를 처음 만드는 방법

• JS에서는 보통 다음과 같이 HTML을 요소를 구현한다. 따로 추가적인 코드가 필요하지 않는다.

<div>
    <h1>Grocery List</h1>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

• 반면 React는 JSX로 반환되는 컴포넌트를 통해 UI를 정의한다.
• JSX는 HTML 처럼 보이지만, 실제로는, 자바스크립트다.

/*
다음은 GroceryList 라는 컴포넌트는 
이후 React DOM 라이브러리에 의해 "랜더링(Rendering)"되어 화면에 출력될 수 있다.
*/

function GroceryList(props) {
    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

💡 앱에서 기능이 분할되는 방식

• JS는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없다.
  기본적인 출력은 HTML 파일에 정의한다.

<div>
    <h1>Grocery List</h1>
    <ul id="grocery-list">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

그리고 목록을 업데이트하는 코드를 자바스크립트 파일(.js)에 넣어야 한다.

function addItemToList() {

  // Add item

}

이렇게 작성되어야 하는 이유는 관심사 분리 원칙에 따라, 화면에 출력을 하는 HTML과 기능을 구현하는 자바스크립트가 분리되도록 설계하였기 때문이다.
하지만 이러한 방식은, 앱이 점차 방대해지고, 복잡해짐에 따라, 컨트롤 하기 어려울 수 있다.

• 반면, React는 위의 기능을 구현하는데 필요한 코드를 하나의 파일로 유지가 가능하다.

function GroceryList(props) {
    function addItem() {
        // Add Item
    }

    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

이렇게 사용하면, 앱이 방대해지고, 복잡해져도, 쉽게 이해할 수 있고, 만들어 놓은 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능해진다.

💡 3. 브라우저에 데이터가 저장되는 방법

• JS에서는 사용자 데이터는 일반적으로 DOM에 저장된다.
  DOM은 브라우저 자체에서 만들고, 유지 관리하며, 전체 HTML을 나타낸다.
  예를 들면, 다음과 같이 텍스트 박스를 정의하고, 사용자가 입력하면, 해당 내용이 브라우저에 저장된다.

<input type="text" placeholder="Enter an item" id="item-input" />

그리고 사용자가 값을 입력할 때, 개발자가 먼저 DOM에서 값을 찾은 다음 추출하여, 해당 입력 상자에 값을 수동으로 입력해야 한다.

const input = document.getElementById("item-input"); console.log(input.value);

지금은, 작은 예라, 편리해보이지만, 입력이 여러 개일 때 문제가 될 수 있다.
만약 id가 다른 입력 텍스트 박스가 여러개라면, id 별로 자바스크립트 코드를 모두 관리해야 한다.

• 반면, React는 사용자의 입력을 기반으로 자신의 상태(State)를 관리하고, 업데이트 하는 제어 컴포넌트를 이용해 사용자 입력 시, 자바스크립트 객체의 텍스트 값을 설정한다. 이를 위해 먼저 상태를 정의해야 한다.

const [itemInput, setItemInput] = useState("");		// 형식 확인하기

입력이 변경될 때마다 설정이 되어야 하므로, HTML 코드는 조금 복잡해질 수 있다.

<input type="text" placeholder="Enter an item" value={itemInput} onChange={e => 
setItemInput(e.target.value)} />

하지만, 자바스크립트에서는 다음과 같이, 간단하게 텍스트 박스의 현재 값을 훨씬 쉽게 알 수 있다.

console.log(itemInput);

현재 앱의 상태(State)를 저장하기 위해 DOM에 의존하지 않음으로써, React가 사용자 데이터를 관리하는 이점은 앱이 성장할수록(커질수록) 그 효과는 커진다.

자바스크립트 변수에 앱의 상태를 저장하는 것은 React가 자바스크립트에 비해 얻을 수 있는 가장 큰 이점 중 하나이며 앱이 복잡할수록 해당 이점이 커진다.

💡 4. UI 업데이트 방법

마지막은, 이벤트 발생 시, 앱이 사용자에 반응하는 방식과 새로운 변경 사항을 반영하는 UI 업데이트 방식이다.

• JS에서는 텍스트 박스 옆에 다음처럼 버튼을 추가할 수 있다.

<input type="text" placeholder="Enter an item" id="item-input" /> <button id="add-button">Add</button>

그런 다음, 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾는다.

const addButton = document.getElementById("add-button");

그리고, 그 버튼에 click listener를 설정한다.

addButton.addEventListener("click", function() {

  // Append item

})

그런 다음, 리스너 내부에서, 먼저 이전과 동일한 방법을 사용하여, 입력 상자의 값을 가져올 수 있을 것이다.
그런 다음, 식료품 목록에 새 항목을 추가하려면, DOM에서 목록을 찾고, 추가 할 새 항목을 만든 다음, 마지막으로 목록 끝에 추가해야 할 것이다. ( 이렇게만 봐도, 상당히 복잡함을 알 수 있다. )

• 반면, React는 자바스크립트 변수의 전체 상태를 유지한다.

const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);

그리고 변수의 각 항목을 매핑(Mapping)한 후, 그에 대한 목록 요소를 반환하여 JSX에 표시한다.

// 형식, 확인하기

<ul>
    {items.map(item => (
        <li key={item}>{item}</li>
    ))}
</ul>

그런 다음, 버튼을 누르는 기능을 정의한다. click listener는 필요하지 않고, onClick 버튼 자체에 속성을 추가 할 수 있다.

<button onClick={addItem}>Add React</button>

이 함수에 추가할 것은 setItem 함수를 사용하여, 기존 항목에 새 항목을 추가하는 것이다.

function addItem() { console.log(itemInput); setItems([...items, itemInput]); }

이로써, React는 목록이 변경되었음을 자동으로, 등록하고, UI를 자동으로 업데이트한다.

이 업데이트 기능은 React가 가진, 위대함 중 하나이다.

📝 DOM

DOM(Document Object Model)
: 객체 지향 모델로써 구조화된 문서를 표현하는 형식

• DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
• 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일 ,내용 등을 변경할 수 있도록 한다.

HTML DOM
:HTML 문서를 조작하고 접근하는 표준화된 방법, 모든 HTML 요소는 HTML DOM을 통해 접근 가능

Document객체

• Document 객체는 웹 페이지를 의미
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시, Document 객체부터 시작해야 한다.

Document 메소드
: HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

Document 메소드 참고자료 👇

📝 이벤트(event)

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생을 의미

웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
따라서, 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고도 한다.

💡 이벤트 타입

이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다.
가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공된다.

💡 이벤트 명세

예전에는 onload, onclick, onmouseover와 같이 기본적이고도 단순한 이벤트만을 사용했으나..
현재는 이보다, 많은 이벤트를 위한 명세가 존재한다.

📝 Node 객체

HTML DOM은 노드로 계층적 단위에 정보를 저장
HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할은 한다.

• HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.
• 이러한 노드 트리는 노드들의 집합이고, 노드 간의 관계를 보여준다.
• 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.