React 구성 요소에 속성을 조건부로 추가하는 방법은 무엇입니까?

React에서는 조건부로 속성을 추가하는 것이 자주 필요합니다. React에서는 매우 간단합니다.

React는 당신이 제공한 값이 진실하지 않다면 일부 속성을 건너뛸 만큼 충분히 정교합니다. 이는 주로 여러 특성을 조건부로 추가할 때 유용합니다. 이 게시물은 조건부로 React 구성 요소에 속성을 추가하는 방법을 알려줍니다.

React는 조건부 속성을 자주 사용하여 동적 동작을 제공합니다. 그러나 대부분의 개발자는 사용 가능한 모든 구현 기술에 익숙하지 않습니다.

따라서 이 기사에서는 React에서 조건부 속성 또는 props를 사용하기 위한 많은 접근 방식과 권장 사례를 검토합니다. 또한 반응 후크에 대한 모범 사례를 확인하십시오.

var condition = true;
var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};
var component = <div { ...props } />;
Or its inline version
var condition = true;
var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

React에서 조건부 속성 렌더링

구현을 진행하기 전에 React의 기본 아키텍처가 조건부 속성을 렌더링하는 방법을 이해해야 합니다.

JavaScript의 속성에 거짓 값이 지정되면 DOM은 더 이상 해당 속성을 포함하지 않습니다. null, undefined 또는 false로 설정된 속성은 DOM에서 삭제됩니다.

예시

const required = true;
const disabled = false;
return <input type="text" disabled={required} required={disabled}/>;

if 문

하나 또는 두 개의 속성만 있는 경우 내부에 인라인 조건문을 추가하는 것이 허용될 수 있습니다. 그러나 React 구성 요소가 너무 많으면 번거롭고 읽기 어려울 수 있습니다.

로그인.js

import React from "react";
const Login= props => {
  let { isLoggedIn } = props;
  if (isLoggedIn) {
    return <button>Logout</button>;
  } else {
    return <button>Login</button>;
  }
};
export default Login;

App.js

import React, { Component } from "react";
import './App.css';
import Login from "./Login";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          Welcome to, BOSC Tech Labs Private Limited
        </h1>
        <Login isLoggedIn={isLoggedIn} />
      </div>
    );
  }
}

삼항 연산자

삼항 연산자는 인수가 3개인 인라인 조건 연산자입니다. 조건을 첫 번째 인수로 사용하여 조건을 한 줄로 압축할 수 있습니다. 조건이 참 또는 거짓이면 다른 인수가 차례로 실행됩니다.

condition ? exprIfTrue : exprIfFalse

예시

import React from 'react';

export default function App() {

  const Flowers = [
    { name: 'Rose' },
    { name: 'Orchid' },
    { name: 'Hyacinth' },
    { name: 'Lily' },
    { name: 'Tulip' },
  ]


  const FlowersList = true

    return (
      <div>
      {
        FlowersList ? (
          <div>
          <ul>
            {Flowers.map(Flower => 
                <li>{Flower.name}</li>)}
          </ul> 
          </div>
: (
          <p>No Flowers</p>
        )
      }

결론

React Components에 조건부 속성 또는 소품을 추가하는 다양한 방법은 이 기사에서 다루었습니다. 기본 설정에 따라 모든 기술을 사용할 수 있습니다. 하지만 무엇보다 먼저 우리에게 필요한 것이 무엇인지 생각해 봅시다.

더 복잡한 JavaScript 구문을 다루고 싶지 않다면 "if"문을 사용하는 것이 가장 간단한 해결책입니다.

코드 복잡성과 가독성이 문제가 되지 않는다면 전통적인 "if"를 계속 사용할 수 있습니다.