« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

RMS : 2. JSX & Props

1. JSX

Component : React에서 HTML을 반환하는 함수

Component의 첫 글자는 반드시 대문자

JSX는 React에서 Javascript와 HTML 사이의 조합. React에서 커스텀 한 개념

React에 특화된 개념으로 return 값으로 html 엘리먼트를 가지고 있다.

React application은 한번에 하나의 컴포넌트만 랜더링 할 수 있다.

1) JSX 사용하기

다음과 같은 Potato.js 파일이 있다.

// potato.js
import React from "react";

function Potato(){
    return (
        <h3>I love Potato</h3>
    );
}
export default Potato;

위의 코드는 JSX 문법으로 작성되었고 Potato라는 이름의 컴포넌트를 반환하고 있다.

Potato를 사용하기 위해서 index.html 파일을 랜더링하는 index.js에 작성해보자

// index.js
ReactDOM.render(
  <React.StrictMode>
    <App/>
    <Potato/>
  </React.StrictMode>,
  document.getElementById('root')
);

하지만 React application에서는 하나의 컴포넌트만 랜더링이 가능하기 때문에 위 코드는 컴파일 에러가 발생한다

index.js는 <App> 컴포넌트를 이미 랜더링 하고 있기 때문에 App.js 내에 Potato 컴포넌트를 넣는다

// App.js
import React from 'react';
import Potato from './potato';

function App() {
  return (
    <div className="App">
      <h1>hello</h1>
      <Potato></Potato>
    </div>
  );
}

export default App;

위와 같은 방식으로,

1) 작성한 컴포넌트를 외부에서 import하고

2) App 컴포넌트 안에서 새로운 컴포넌트를 사용할 수 있다.

2) Props

HTML은 태그 내에 다양한 정보와 속성을 가지고 있으며 정보 교환 등 다양한 활용이 가능하다.

React에서도 부모-자식 컴포넌트 간 데이터 교환이 가능한데,

부모 컴포넌트에서 지정한 자식의 속성을 자식 컴포넌트에서 활용하기 위해서는

props

를 사용한다.

App —> Food (속성 지정 및 활용)

예를 들어,

App.js 에 Food라는 새로운 컴포넌트를 추가한다고 하자.

// App.js
import React from 'react';

// Food
function Food(){
  return <h1>I like Food</h1>
}

function App() {
  return (
    <div className="App">
      <Food />    
    </div>
  );
}

위 코드는 화면에서 'I like Food' 라는 문구를 출력한다

여기서 Food 대신 특정 단어를 출력하고 싶을 때는 이렇게 만들 수 있다

// App.js
function App() {
  return (
    <div className="App">
      <Food name='kimchi'/>
			<Food name='bulgogi'/>    
			<Food name='mandoo'/>      
    </div>
  );
}

부모 컴포넌트 (여기서는 <App/>)에 속성을 지정해 줄 수 있는데,

React에서는 이것은 props라고 한다.

props는 자식 컴포넌트에 파라미터를 통해 전달된다.

Food 컴포넌트에서 props를 다음과 같은 방법으로 확인할 수 있다

// 1.
// Food
function Food(props){
  return <h1>I like {props.name}</h1>
}

// 결과 
// I like kimchi
// I like bulgogi
// I like mandoo

// 2.
function Food({name}){
  return <h1>I like {name}</h1>
}

// 결과 
// I like kimchi
// I like bulgogi
// I like mandoo

두 가지 모두 같은 결과를 출력하는데,

JSX 에서 자바스크립트 코드를 실행하려면 { } 안쪽에 JS문법을 작성하면 된다.

(1) props.

props 라는 파라미터로 받아온다면 Object 형식으로 모든 props를 받아오기 때문에 원하는 데이터의 키 값으로 접근해야한다.

(2) { name }

파라미터 안에 { } 를 사용하여 직접적으로 특정 props 값을 불러오려면 부모 객체에서 지정한 props 이름과 같아야 한다

props는 부모 컴포넌트로부터 특정 값을 전달하기 위한 속성이고

지정된 값이기 때문에 자식 컴포넌트에서 임의 변경이 불가능하다.

만약 전달된 props 값을 자식 컴포넌트에서 바꿔야 한다면,

자식 컴포넌트 내 state 값으로 지정하여 활용하도록 한다.

3) Dynamic Data : 동적데이터 추가하기

— 반복되는 컴포넌트를 일일이 추가하는 일은 번거롭다. 동적인 방식으로 컴포넌트들을 추가해보자

(1) map을 활용하여 데이터 동적으로 생성하기

Javascript 에서 map 이란?

: 배열의 각 item에서 특정 function을 실행하는 배열을 가진 javascript function

→ map을 사용하면 array의 각 요소를 인자로 한 function을 실행한다.

다음과 같은 array가 있다고 하자.

const fruits = ['apple', 'banana', 'grape', 'melone', 'cherry'];

fruit 배열의 모든 요소에 인덱스를 붙여보자

하나씩 모두 수정이 가능하지만 비효율적이다.

이런 경우에는 map을 사용해보자

const fruits = ['apple', 'banana', 'grape', 'melone', 'cherry'];
fruits.map( (current) => {
	current = current + '!'
  console.log(current);
  return current;
})

// 결과
// apple!
// banana!
// grape!
// melone!
// cherry!
// ['apple!, 'banana!', 'grape!', 'melone!', 'cherry!'];

map에 function을 넣을 수 있고 첫 번째 인자는 배열의 item이 된다. (위의 코드에서는 current가 됨)

배열 데이터를 모두 수정 또는 검증해야 하는 경우, map을 사용하면 모든 배열 값을 거치므로 쉽게 작업이 가능하다

주의사항

map을 사용해서 component를 반복적으로 만든다면,

component의 props에 중복되지 않는 key가 반드시 필요하다.

key 속성은 외부에서 사용되지 않고 React 내부에서 사용되는 용도이다

// App.js

// 리스트를 동적으로 생성하기
const foodILike= [
  {
    id:1,
    name: "Kimchi",
  },
  {
    id: 2,
    name: "Samgyeopsal",
  },
  {
    id: 3,
    name: "Bibimbap",
  },
  {
    id: 4,
    name: "Doncasu",
  },
  {
    id: 5,
    name: "Kimbap",
  }
];

//...

function App() {
  return (
    <div className="App">
      {foodILike.map(function(current){
				<Food id={current.id} data={current}/>
				// 이런식으로 id값을 준다.
			})} 
    </div>
  );
}

function을 사용할 경우

// ...
function renderFood(dish){
	return <Food id={dish.id} data={dish}>
}

function App() {
  return (
    <div className="App">
      {foodILike.map(renderFood)}
    </div>
  );
}

4) Prop-types

$  npm install prop-types

: prop-types는 부모 컴포넌트에서 전달한 prop의 값이 제대로 되었는지 확인하기 위한 라이브러리

prop 이름이 제대로 사용되었는지 확인

값이 제대로 동작하는 지 확인

** 제대로 동작하지 않는다면

$npm i

를 실행해본다.

(1) 사용방법

// App.js
import React from 'react';
import PropTypes from 'prop-types';

Prop-types 다운로드 후 App.js에 플러그인을 import 한다

사용하고자 하는 컴포넌트에 propTypes 객체를 넣는다

Food.propTypes = {
	name : PropTypes.string.isRequired,
	image : PropTypes.string.isRequired,
	rating : PropTypes.string.isRequired
}

객체 이름은 반드시 propTypes 이어야 한다

string, number, boolean 등 다양한 변수의 타입과 상태를 설정할 수 있다(PropTypes 레퍼런스 참고)

객체의 키 값으로는 prop이름이 들어간다

만약 객체의 키 값으로 들어간 props 의 타입이 맞지 않는 경우, console 창에 오류 사항으로 표기된다.

Daily coding