React

리액트는 HTML/CSS/JS로 나눠적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어둔 컴포넌트 를 사용한다.
컴포넌트를 분리하면 서로 독립적이고 재사용성이 높아 기능 자체에 집중할 수 있다.
JavaScript 라이브러리이기 때문에 기존 프로젝트에 유연하게 적용할 수 있다.
Facebook에서 개발한 언어로, 안정적이고 유명하며 리액트 네이티브로 모바일 개발도 가능하다.
DOM과 달리 CSS와 JSX만 사용하여 웹 애플리케이션을 개발할 수 있다.
JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치하는 방식이다.
JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡하고 가독성이 떨어진다.

  
import React from "react"
// React를 불러온다.
// 어떠한 파일을 가져올 때(연동)에 사용한다.

function App (){
    const user = {
        firstName : "React",
        lastName : "JSX Activity"
    }

    function formatName (user){
        return user.firstName + " " + user.lastName;
    }
    // JSX 없이 활용한 React
    return React.createElement("h1", null, `Hello, ${formatName(user)}!`)
    // h1 - 태그 이름 삽입
    // null - 넣을 객체 props
    // ${formatName(user)} - 자식으로 넣을 요소
    // React라는 컴포넌트에 요소를 생성하는데, 무엇을 넣을지
}

export default App;

JSX

JavaScript XML의 줄임말로 JavaScript를 확장한 문법이다.
브라우저가 바로 실행할 수 있는 코드가 아니기 때문에 Babel을 사용하여 브라우저가 이해할 수 있는 JavaScript로 컴파일해야 한다.
- 리액트에서 따로 모듈을 설치하지 않아도 자동으로 설치한다.
JavaScript를 브라우저가 읽고 화면에 렌더링한다.
엘리먼트 클래스 사용 시, className으로 표기해야 한다.
변수명, 함수 사용을 위해 꼭 중괄호{}로 감싸주어야 한다.
사용자가 정의할 컴포넌트는 꼭 대문자로 시작해야 하며, 소문자로 시작할 경우 일반적인 html 엘리먼트로 인식한다.
if문은 사용이 불가능하며, 삼항연산자를 사용해야 한다.
여러 개의 엘리먼트를 생성할 때는 map() 을 사용해야 한다.
- 리액트에서 중복되는 요소를 생성할 때는 key 속성이 필요하다.
- 리액트가 실행되며 사용자의 행동에 의해 요소가 추가되거나 수정,삭제되는 경우가 발생하는데 이때, 리액트가 요소들을 새로 생성하지 않고 기존의 요소를 기억하여 최소한의 수정,복제 등을 한다.

  
// 틀린 예제 - 여러 개의 요소는 하나의 요소로 감싸주어야 한다.
<div>Hi</div>
<div>there</div>
// 올바른 예제
<div>
    <div>Hi</div>
    <div>there</div>
</div>

// 틀린 예제 - JSX에서 클래스명을 선언 시 class가 아닌 className을 사용해야 한다.
<div class="example">예제입니다.</div>
// 올바른 예제
<div className="example">예제입니다.</div>

// 틀린 예제 - 컴포넌트 선언은 대문자로 시작해야 한다.
function app(){
    ***
}
// 올바른 예제
function App(){
    ***
}

예제

  
const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

// 함수형 컴포넌트, 컴포넌트를 export default로 기본값으로 넘겨준다.
export default function App(){
    // 선언형 컴포넌트
    const postJSX = (post) => {
        // 전달받는 인자가 post이다.
        return (
            <div key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.content}</p>
            </div>
        )
    }

    return (
        <div>
            {post.map(postJSX)}
            {/*post의 내용이 postJSX 함수로 인자에 뿌려진다.*/}
        </div>
    )
}

map을 이용한 반복
- 100개의 정보를 담은 객체가 있고, 이를 하드코딩한다면, 모든 데이터가 보여질 수 있도록 하나하나 작성해주어야 하지만, map을 이용하여 손쉽게 작성할 수 있다.

  
const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

const App = () => {

    const mapEx = (post) =>{
        return (
            <div key={post.id}>
                <h2>{post.title}</h2>
                <span>{post.content}</span>
            </div>
        )
    }

    return(
        <div>
            {posts.map(mapEx)}
        </div>
        {/* 또는 posts.map(mapEx) 자체를 변수로 선언하여 변수 자체를 넣어줄 수 있다.*/}
    )
}

key 속성
- 리액트에서 반복되는 요소를 처리할 때 key 속성이 필요하며, key가 없어도 작동은 가능하지만 리액트가 효율적으로 작동하기 위해서는 key 속성이 필요하다. (JSX 설명 참조)
- key 속성값은 가능한 데이터에서 제공하는 id가 할당되어야 한다.
- id가 없는 경우 인덱스를 넣어서 해결할 수 있지만, 최후의 수단으로 사용해야 한다.

Component

하나의 기능 구현을 위한 여러 종류의 코드들을 묶어 놓은 것이다.
UI를 구성하는 필수 요소이다.
리액트의 심장이라고도 불리우며, 각각 독립적인 기능을 가지고 있는 UI의 한 부분으로, 이를 조합하여 애플리케이션을 만든다.
리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다.
최상위 컴포넌트는 근원의 역할을 하며, 여러 개의 자식 컴포넌트를 가질 수 있고, 이러한 계층적구조가 트리 구조를 형상화한다.
각 컴포넌트는 독립적으로 존재하기 때문에, 하나의 컴포넌트의 기능을 변경한다고 하여 다른 컴포넌트를 수정할 필요가 없다.
- 원하는 수정사항에 맞춰 컴포넌트의 위치만 수정하거나 재사용할 수 있다.

React 1장 - 기초

React

JSX

Component

관련된 글

React 2장 - Component와 props

React 3장 - event

React 4장 - state