#2 JSX와 Props

yiyb0603·2020년 4월 29일

React

목록 보기

2/15

안녕하세요! 오늘 작성해볼 리액트 주제는 JSX와 Props라는 주제입니다. 지난 글에서는 리액트 프로젝트 준비, 생성 과정을 해보았는데요, 이번에는 리액트 코드들을 만져보며 리액트의 기본적인 JSX와 Props의 구조에 대해서 알아보도록 하겠습니다😉

1. JSX

1-1) JSX란?

JSX는 JavaScript XML의 줄임말로, 자바스크립트로 만든 XML이라는 뜻입니다. 리액트에서 퍼블리싱과 컴포넌트 파일에서 필수적으로 들어가는 코드이며, 가장 기본적인 요소들중에 하나입니다.

1-2) JSX의 구조와 규칙

자바스크립트 XML이라고 해서 처음보거나, 낯설거나 한건 절대 아닙니다 😉 일반적으로 지금까지 해왔던 HTML과 완전 흡사하며, HTML에 자바스크립트와 추가적인 규칙들만 지켜준다면 JSX가 완성이 됩니다.

JSX를 알아보기 위해서 src 디렉토리의 App.js 파일의 코드로 알아보겠습니다 😉
해당 코드의 주석에 import 해오는법과 export 등 여러가지 규칙들을 적어보았습니다 😎

import React from 'react'; // 리액트 불러오기
import logo from './logo.svg'; // 이미지 파일을 불러오는 법
import './App.css'; // 스타일링 파일을 불러오는법

function App() { // 함수형 컴포넌트의 정의
  return (
    <div className="App"> {/* 최상위 태그 1개 */}
    {/* JSX코드 안에서의 주석 표현 */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; // 다른 파일에서도 불러쓰기 위해서 내보내주기

💨JSX로 프론트를 구현하는 부분들은 흔히 "컴포넌트"라고 부릅니다.
컴포넌트 파일의 기본적인 구조는 다음과 같습니다.

    import React from 'react';
    
    function 컴포넌트 이름() {
    // 이곳에는 변수와 함수 선언!
    
    const abc = 1;
    
    const printAbc = () => {
    	console.log(abc);
    }
    
	return ( // JSX 작성을 할 수있는 return() 부분
        <div>
            <div>Hello World</div>
            {
            	console.log('Hello World!')
                // 대괄호 안에는 자바스크립트 코드가 들어갑니다.
            }
        </div>
       );
    }
    
    export default 컴포넌트 이름;

현재 컴포넌트는 "함수형 컴포넌트"로 작성을 했는데요, 컴포넌트 종류에는 총 두가지가 있습니다. ✌

클래스형 컴포넌트

함수형 컴포넌트

하지만 클래스형 컴포넌트와는 다르게 함수형 컴포넌트에는 다양한 리액트의 Hooks가 존재합니다. Hooks의 종류에는 나중에 알아보지만, 간단히 얘기하자면 DOM (Document Object Model) 제어, 함수 재사용, 상태관리 등이 있습니다.
리액트 Hooks를 사용하면 코드가 간결해지기도 합니다. 😻

또한, 많은 리액트 사용자들이 함수형 컴포넌트를 많이 쓰고있기 때문에 저는 함수형 컴포넌트를 적극 추천해드립니다.

🖍 이제 JSX의 기본적인 규칙들을 정리하자면 다음과 같습니다. 🖍

(1) 코드의 최상위 태그가 1개 이상 존재해야 한다.

저는 div 또는 <></>로 이루어진 빈 Fragment 형식의 태그를 최상위 태그에 많이 사용합니다.

(2) img, input, 리액트 아이콘과 같은 닫히는 태그가 없을때에는 다음과 같은 <태그 />형식으로 적어야 한다.

			<img />, <input />

(3) 다른 파일에서 해당 파일을 import 하기 위해서는 export default로 컴포넌트를 내보내줘야 한다.

(4) 해당 파일에서 다른파일을 import 하려면, 파일 경로를 지키면서 import 해오면 된다.

(5) img 태그 src 속성에 링크를 넣으려면, 사진 경로를 import해와야 한다.

(6) JSX 안에서 자바스크립트 문법을 사용하려면 중괄호안에 넣을 수 있고, 변수와 함수를 선언할때는 컴포넌트 안의 return문 이전에 쓸 수 있다.

(7) JSX에서 클래스를 주려면 class가 아닌 className으로 줘야한다.

2. Props?

💨Props는 흔히 컴포넌트끼리 전달하여 주고, 받는 데이터를 말합니다. 주로 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 형식이 많으며, 프롭스를 전달하는 공통적인 주 목적은, 데이터를 전달하기 위함입니다.
해당 데이터의 종류에는 변수, 함수, 배열, 객체 등이 포함되어 있습니다.

2-1) Props의 선언과 사용

Props가 어떻게 쓰이고, 선언이 되는지 직접 코드를 만져보며 보도록 하겠습니다. 먼저, src 디렉토리에 components라는 폴더를 만든후에, First.js와 Second.js라는 자바스크립트 파일을 만들어 봅시다! 🖍
※ 주의사항: 컴포넌트 이름의 첫 알파벳은 대문자로 시작해야 합니다.

파일을 모두 만드셨으면, First.js에 코드를 작성해줍시다 🖌🖋
저는 화살표함수 형태의 함수형 컴포넌트로 작성해주었습니다. 😎😎

import React from 'react';

const First = () => {
    return (
        <div>
            <div>안녕하세요 yiyb0603!</div>
        </div>
    );
}

export default First;

그런 다음, Second.js 파일에 First.js에서 작성해주었던 First 컴포넌트를 렌더링 해주는 작성해줍시다.

import React from 'react';
import First from './First';

const Second = ()  => {
    return (
        <div>
            <First />
        </div>
    );
}

export default Second;

이대로 바로 실행을 하면 안되겠죠? App.js에서도 Second 컴포넌트를 호출해야 모든 렌더링이 완료됩니다 :) 😊 다음과 같이 App.js를 작성해보세요!

import React from 'react';
import Second from './components/Second';

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

export default App;

기존에 App.js에 있던 코드들은 불필요하기에, 모두 지워줬습니다. 그 다음 yarn start를 쳐주시면 프로젝트가 실행이 됩니다.
다음과 같은 화면이 뜬다는것을 확인하실 수 있습니다. 😍

이제 저희는 yiyb0603이라는 원하는 이름을 Props로 넘겨서 렌더링을 시켜보도록 하겠습니다. 먼저, First.js에 프롭스로 name이라는 값을 받겠다 라고 설정을 해줍시다.
괄호안에 { }로 감싸고, 프롭스를 받아올 변수를 넣어주시면 됩니다 :) 저는 name이라는 값으로 프롭스를 받아오고, 해당 변수를 JSX에 넣어서 렌더링을 시켜볼거에요! 👩

import React from 'react';

const First = ({ name }) => {
    return (
        <div>
            <div>안녕하세요 {name}</div>
        </div>
    );
}

export default First;

안녕하세요 {name} {name}이라고 적은 이유는, 위에 JSX 설명에서도 말씀드렸다시피, 자바스크립트의 문법이 올때는 JSX에 대괄호를 넣고 써주시면 됩니다. 이제 Props를 받아와서 렌더링할 준비는 다 되었습니다.

이제, Second 컴포넌트에서 Props를 넘겨줄거에요! 다음과 같이 Second.js 코드를 적어주세요. 🙂

import React from 'react';
import First from './First';

const Second = ()  => {
    return (
        <div>
            <First name ="홍길동" />
        </div>
    );
}

export default Second;

코드를 간단하게 설명하자면, First 컴포넌트에 name이라는 Props 변수에 "홍길동" 이라는 값을 넣어주겠다고 전달이 완료된 상태입니다. 저장을 하고, 실행중인 웹을 다시 볼까요?

홍길동 이라는 프롭스를 넘겨준 값이 성공적으로 렌더링이 되었네요!✌😎
이를 활용해서 프롭스를 더 선언해보고 넘겨주도록 해보겠습니다.
저는 나이, 성별, 지역이라는 프롭스를 선언해보고 넘겨주도록 하겠습니다. 👩

First.js에는 아래와 같이 작성해주었습니다.

import React from 'react';

const First = ({ name, age, gender, location }) => {
    return (
        <div>
            <div>안녕하세요 {name}입니다.</div>
            <div>나이는 {age}살 입니다.</div>
            <div>성별은 {gender} 입니다.</div>
            <div>사는 지역은 {location}입니다</div>
        </div>
    );
}

export default First;

Second.js에서도 마찬가지로 프롭스를 전달하는 코드를 작성해주었습니다. 🖍🖍

import React from 'react';
import First from './First';

const Second = ()  => {
    return (
        <div>
            <First name ="홍길동" age = "17" gender ="남자" location ="대한민국" />
        </div>
    );
}

export default Second;

age에는 17, gender에는 남자, location에는 대한민국 이라는 값이 들어가있겠다라는 생각이 듭니다. 모두 넘겨주었으면 성공적으로 렌더링이 되었는지 확인해봅시다!

프롭스로 넘겨준 값들이 모두 성공적으로 렌더링 되었네요 :) 👨‍❤️‍👨💏
프롭스의 종류는 다양하게 줄 수 있습니다. 이 글에서 본 변수의 형태나 함수, 객체, 배열 등 다양하게 프롭스로 줄 수 있습니다. 자료형도 정수, 문자열, 참/거짓 불문하지 않고 모두 가능합니다 :)

나중에 리액트 튜토리얼에서 boolean으로 넘겼을때 유용한 처리 / 함수로 넘겼을때 처리하는법과 같은 이글에서 설명드리지 못한 구조도 올리겠습니다 ㅎㅎ 😉