[리액트] 리액트 웹 개발 - 4

태그로 감싼 자바스크립트 변수를 콘솔로그로 출력해보면 자바스크립트 객체가 출력됨.

이러한 객체를 리액트 element라고 부름.

 

리액트 element를 리턴하는 함수를 만들면 element 변수에서 JSX코드를 작성할 때 함수 이름을 가진 태그를 사용할 수 있음.

 

이 때의 리액트 element를 리턴하는 함수를 리액트 Component라고 부름.

 

리액트 컴포넌트의 규칙 :

함수의 첫글자를 대문자로 작성해야함

JSX문법으로 리액트 element를 리턴해줘야함.

 

return 부분을 소괄호로 감싸주면 여러 줄에 걸쳐 코드를 작성할 수 있음.

 

참고로 

웹주소가 있는 이미지를 불러올 때( 'https://upload....' ),

const imageUrl = 'https://upload....'로 변수를 만들고 이미지 파일 경로를 src = {}안에 집어넣어

<img src = {imageUrl} ... 같이 이미지 태그를 만들 수 있으나

로컬 디렉토리에 존재하는 내 폴더 이미지는 주소가 없기 때문에 import를 활용해 불러와야 한다. src 안에서 바로 작성이 불가능하다.

즉

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

이와 같이 import를 통해 내 로컬 디렉토리의 이미지 파일을 불러오고

default 값으로 리액트 컴포넌트 Dice를 export하여 활용할 수 있다. 

이때 img 태그에 넣는 alt 속성은 이미지 파일이 보이지않을 때 보여줄 텍스트다.

 

---

리액트 엘리먼트

JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}

이런 객체를 리액트 element 라고 부른다.

이 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것이죠.

리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소입니다.

 

리액트 컴포넌트

리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법입니다.

컴포넌트를 만드는 가장 간단한 방법은 자바스크립트의 함수를 활용하는 건데요. 아래 코드에서 JSX 문법으로 작성된 하나의 요소를 리턴하는 Hello 함수가 바로 하나의 컴포넌트입니다.

이렇게 요소를 컴포넌트로 작성하게 되면 다양한 장점들이 있는데, 자세한 내용은 이후의 개념들을 하나씩 배워나가면서 차차 알아보도록 합시다!

import ReactDOM from 'react-dom';

function Hello() {
  return <h1>안녕 리액트</h1>;
}

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

ReactDOM.render(element, document.getElementById('root'));

 

이렇게 컴포넌트를 작성하면, 위 코드에서 element 변수 안의 JSX 코드에서 볼 수 있듯 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수가 있습니다.

이런 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수가 있습니다.

//Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

//App.js

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice />
    </div>
  );
}

export default App;

한 가지 주의해야 할 부분은, 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 한다는 것입니다. 컴포넌트 이름의 첫 글자가 소문자라면 오류가 발생하니깐 꼭 주의해 주세요!

이번 레슨은 어땠나요?