Skip to content

Latest commit

 

History

History
205 lines (176 loc) · 10.9 KB

componentAndJSX.md

File metadata and controls

205 lines (176 loc) · 10.9 KB

태그를 재사용하기

<div>
  <div>
    <h1>Hello World</h1>
  </div>
  <div>
    <h1>Hello World</h1>
  </div>
  <div>
    <h1>Hello World</h1>
  </div>
</div>
  • HTML을 작성할 때 불편한 점은 이미 만든 태그를 반복해서 만들어야 한다는 점이다.
  • 위 코드에서 화면에 표시되는 Hello World를 클릭을 했을 때, Hello World라는 알람 창이 나오도록 코딩을 해 보도록 하자.
<div>
  <div>
    <h1 onclick="alert('Hello World')">Hello World</h1>
  </div>
  <div>
    <h1 onclick="alert('Hello World')">Hello World</h1>
  </div>
  <div>
    <h1 onclick="alert('Hello World')">Hello World</h1>
  </div>
</div>
  • 위와 같이 3개의 태그 모두를 바꿔줘야 할 것이다.
  • 이런 중복을 제거하기 위해 컴포넌트라는 개념을 만드는데 반복적으로 사용할 구조를 만들고 이를 여러 곳에서 재사용할 수 있게 만드는 것이 컴포넌트이다.
<div>
  <h1 onclick="alert('Hello World')">Hello World</h1>
</div>
  • 위의 태그 단위로 반복적으로 사용될 수 있는 단위를 만들면, 동일하게 사용되는 모든 태그에 변경사항을 한 번에 적용할 수 있는 장점이 생긴다.
  • onclick="alert('Hello World')"을 각각의 태그에 넣을 필요 없이, 재사용 가능하도록 작성된 태그에 한 번만 넣어주면 이를 사용하는 모든 부분에 동일하게 변경 사항이 적용된다.

컴포넌트의 개념

  • 위와 같이 반복적으로 사용가능한 단위를 컴포넌트라고 부른다.

컴포넌트를 만들기 위해서는?

  • HTML에서는 특정 단위의 태그를 재사용할 수 있는 단위의 컴포넌트를 만드는 것이 불가능하다. 컴포넌트를 만들기 위해서는 자바스크립트를 써야한다.
  • 하지만 자바스크립트로만 컴포넌트를 만들면 여러가지 불편한 점이 있는데, 리액트는 자바스크립트로 컴포넌트를 만들 때 발생하는 여러가지 불편함을 해소하기 위해 만들어졌다.

컴포넌트의 UI/UX 관점에서의 이점

  • 하나의 웹 사이트는 화면에 표시되는 여러가지 구성 요소들이 반복적이고 통일감 있는 디자인을 갖도록 만들어져야 한다. 컴포넌트를 만들면 동일한 디자인의 구성요소를 만들 수 있고, 같은 종류의 구성 요소들은 동일한 기능을 갖도록 만들 수 있어서, 이전에 구성 요소들을 사용한 경험이 있는 유저는 더 편하게 웹 사이트를 사용할 수 있다.

하고자 하는 것

  • 앞으로 리액트를 공부하면서 작성할 모든 컴포넌트 예제들을 한 화면에서 알 수 있도록 예제 컴포넌트를 로딩하는 기능을 만들 것이다.

리액트에서 컴포넌트

  • 리액트는 컴포넌트 단위로 코드가 작성된다. 웹에서 컴포넌트란 태그 구조를 반복적으로 재사용할 수 있도록 만든 것이다.
  • 리액트에서 컴포넌트는 태그 단위를 갖고 있으며, 이 태그의 단위에 다양한 동작을 가미할 수 있다.
  • 리액트에서 컴포넌트는 함수를 실행하면 태그 구조가 반환되도록 만들어져 있다.
  • 컴포넌트 함수를 여럿 조합하여 웹 사이트의 화면을 만들 수 있다.

App.js 변경하기

  • src 폴더에 보면 App.js란 파일이 있다.
  • 리액트를 처음 설치할 때 생성되는 App.js의 내용을 지우고 다음과 같이 코드를 적어 보자.
function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

브라우저의 화면

  • 위의 코드를 적으면 브라우저에 진한 글씨의 Hello World가 나온다.

컴포넌트 함수

  • 리액트에서 컴포넌트 함수는 함수의 반환값으로 태그 구조를 반환하는 함수라고 할 수 있다.
  • 일반적으로 리액트 파일에서 export로 내보내는 함수가 컴포넌트 함수에 해당한다. export로 내보내게 되면 다른 자바스크립트 파일에서 내보낸 값을 사용할 수 있다. export default App 부분을 통해서 App 함수를 내보낸 것을 알 수 있다. 따라서 이곳에서 컴포넌트 함수는 App 함수이다.
  • 컴포넌트 함수는 반환 값(return 문법의 대상)으로 리액트 태그 구조를 반환한다. 일반적인 HTML 태그 구조와 달리 리액트의 태그 구조는 사용 방법이 다르다. 리액트에서 사용되는 태그 구조를 JSX라고 부른다.

JSX

  • 리액트를 사용해서 브라우저에 태그를 로딩하기 위해서는 컴포넌트 함수의 반환 값을 태그로 만들어 주어야 한다.
  • App 함수의 리턴값은 (<div><h1>Hello World</h1></div>)이며 태그 구조를 값으로 취급하는 것을 JSX라고 부른다. 여기서 (<div><h1>Hello World</h1></div>) 부분이 JSX이다.

함수의 반환값

  • 함수의 리턴값은 자바스크립트에서 값으로 취급되는 대상이다. 자바스크립트에서 값으로 취급되는 것은 불리언(true, false), 수, 문자열, null, undefined, 함수, 배열, 오브젝트 등이 있다.
function sampleFunction() {
  return "sample function is called";
}
sampleFunction();
  • 위 코드를 브라우저의 콘솔 창에 띄워보자. 그러면 'sample function is called'라는 문자열이 반환된다. return 이라는 키워드 다음에 오는 것이 함수의 반환값이다. return 값의 구문을 사용하면 함수 내부의 코드 실행은 끝난다. (return "sample function is called"; 아래에 함수의 종료를 의미하는 }가 나올 때까지 자바스크립트 코드가 더 있어도 실행되지 않는다. return 값이 실행될 때 함수는 종료된다.)

자바스크립트에서 괄호의 의미

  • 자바스크립트는 괄호 (())를 마주하면 괄호 내의 코드는 어떤 값을 최종적으로 가질 것이라고 기대하게 된다.
(function sampleFunction() {
  return "sample function is called";
})();
  • 위 코드는 함수에 괄호를 씌워준 코드이다. 앞선 코드와는 달리 sampleFunction()가 빠져있는데도 브라우저의 콘솔에서 위 코드를 실행하면 'sample function is called'라는 문자열이 반환된다.
  • sampleFunction은 함수라는 값의 이름이라서 sampleFunction()이라는 것은 값() 꼴을 띤다. 곧 함수문법()는 값()의 꼴이 아니기 때문에 함수를 실행하지 않지만, 위 코드는 (함수문법)() 꼴으로 괄호가 값을 가진다고 희망하기 때문에 (함수문법)이 함수라는_값으로 판단된다. 따라서 함수라는_값()으로 값() 꼴이 되어 실행이 되는 것이다.
function sampleFunction() {
  return "sample function is called";
}();
  • 만약에 함수문법() 꼴로 위와 같은 코드를 실행한다면 함수문법은 값이 되지 않았기 때문에 값() 꼴이 되지 않아 에러가 발생한다.

JSX를 괄호로 묶어주는 이유

  • JSX는 자바스크립트에서 값으로 취급되는 대상이 아니다. JSX에 괄호를 씌워주면 `(JSX) 꼴이 되어 JSX를 값으로 취급하려고 한다.
  • 이처럼 자바스크립트에서 값으로 취급되지 않는 대상을 값으로 취급하기 위해서는 ()로 감싸줄 필요가 있다.

JSX는 자바스크립트가 아니다

JSX는 자바스크립트의 값이 아니라 리액트 개발 환경에서의 값이다.

  • JSX는 자바스크립트에서 직접 사용할 수 있는 값이 아니라, 리액트를 만들어 주는 환경에서만 사용 가능한 특수한 값이다. 자바스크립트를 실행하는 자바스크립트 엔진은 자바스크립트 문법이 아닌 JSX를 실행할 수 없기 때문에 리액트 툴은 내부적으로 JSX는 자바스크립트로 실행가능한 함수로 변환한다.

자바스크립트로 실행가능하도록 변환된 JSX 문법

  • 자바스크립트의 어떤 구조로 변환되는지 알 필요는 없다. JSX가 자바스크립트 문법이 아니기 때문에 리액트 환경에 의해 실행 가능한 자바스크립트로 변환되어야 한다는 것을 확인하기 위한 참고만 하자.

npm start에 의해 JSX 코드가 자바스크립트 코드로 변환 되었을 때

function App() {
  return /*#__PURE__*/(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("div", {
    children: /*#__PURE__*/(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("h1", {
      children: "Hello World"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 127,
    columnNumber: 5
  }, this);
}

아래는 npm run build에 의해 JSX가 자바스크립트로 변환되었을 때이다.

function() {
  return (0, r.jsx)("div", {
      children: (0, r.jsx)("h1", {
          children: "Hello World"
      })
  })
}

JSX 문법은 리액트의 createElement 함수로 변환된다.

import { createElement } from 'react';

function() {
  return createElement("div", {
      children: createElement("h1", {
          children: "Hello World"
      })
  })
}
  • JSX 문법은 자바스크립트로 해석되지 않는 리액트 개발환경에서만 사용할 수 있는 특별한 문법이다. 브라우저는 순수한 자바스크립트만을 실행하기 때문에 JSX 코드를 그대로 실행할 수 없으므로 리액트 프로젝트를 브라우저에서 실행시키기 위해서는 순수한 자바스크립트로 바꾸어 주어야 한다. 이 때 JSX 내의 각각의 태그는 리액트의 createElement 함수로 변환된다.
  • 위의 (0, r.jsx), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)가 createElement 함수에 해당한다.

만약 브라우저에서 리액트를 로딩할 수 없다면?

  • 만약 화면에 위 리액트 화면을 로딩하는 방법을 모르겠다면 브라우저의 주소표시줄에 http://localhost:3000/ 또는 http://127.0.0.1:3000/로 접속을 해 본다.
사이트에 연결할 수 없음

localhost에서 연결을 거부했습니다.
다음 방법을 시도해 보세요.

연결 확인
프록시 및 방화벽 확인
ERR_CONNECTION_REFUSED
  • 리액트 페이지가 나타나지 않고 위와 같은 메시지가 나온다면 터미널에 npm start 명령어 입력한 후 브라우저에서 접속해 보자.
  • 여전히 접속이 되지 않는다면 포트 번호가 다를 수 있다. npm start 실행 후의 메시지를 확인해 보자. :3000이 아니라면 메시지에 적힌 포트 번호로 접속을 하도록 한다.
  • 포트 번호가 :3000이 아닌 경우에는 다른 서버가 실행되고 있을 가능성이 있으므로 열려 있는 터미널에 실행되고 있는 다른 서버가 있는지 확인하도록 하자.