리액트 컴포넌트에 조건적으로 속성을 추가하는 방법은 무엇인가요?

특정 조건이 충족되었을 때만 리액트 컴포넌트에 속성을 추가하는 방법이 있을까요?

렌더링 이후 Ajax 호출을 기반으로 폼 요소에 required 및 readOnly 속성을 추가해야 하지만, readOnly=false는 속성을 완전히 생략하는 것과 동일하지 않기 때문에 이 문제를 해결할 수 없는 것 같습니다.

아래 예제는 원하는 동작을 설명하려고 했으나 작동하지 않습니다.

(구문 오류: 예기치 않은 식별자)

function MyInput({isRequired}) {
  return <input classname=foo {isRequired ? required : } />
}

답변 1

React는 특정 속성의 경우에 값이 참이 아닐 경우 속성을 생략하는 데에 충분히 지능적입니다. 예를 들어:

const InputComponent = function() {
    const required = true;
    const disabled = false;
    return (
        <input type=text disabled={disabled} required={required} />
    );
}

다음과 같은 결과가 나타납니다:

<input type=text required>

업데이트: 만약 누군가가 어떻게/왜 이런 일이 일어나는지 궁금하다면, ReactDOM의 소스 코드에서 세부 사항을 찾을 수 있습니다. 특히 30번째 줄과 167번째 줄에서 DOMProperty.js 파일을 참조하십시오.

답변 2

React 컴포넌트에 조건적으로 속성을 추가하는 방법은 여러 가지가 있습니다. React에서 조건부 렌더링을 구현하는 방법을 알아보겠습니다.
React에서 조건부 렌더링을 위한 가장 일반적인 방법은 JSX에서 조건문을 사용하는 것입니다. 조건문을 사용하여 특정 조건을 만족할 때만 특정 속성을 추가할 수 있습니다.
예를 들어, `isLoggedIn`이라는 상태가 있다고 가정해 보겠습니다. 이 상태가 `true`인 경우에만 `` 컴포넌트에 `username` 속성을 추가하고 싶다고 가정해 보겠습니다.
```jsx
function App() {
const isLoggedIn = true;

return (

{isLoggedIn ? (

) : (

)}

);
}
```
위의 예시에서는 `isLoggedIn`이 `true`인 경우에만 `UserProfile` 컴포넌트에 `username` 속성을 추가합니다. 그렇지 않은 경우에는 `Login` 컴포넌트를 렌더링합니다.
조건에 따라 동적으로 속성을 추가하는 것 이외에도, JavaScript의 조건문을 사용하여 컴포넌트의 속성에 동적인 값을 할당할 수도 있습니다.
```jsx
function UserProfile({ isLoggedIn }) {
const username = isLoggedIn ? JohnDoe : Guest;

return (

Welcome, {username}!

);
}
```
위의 예시에서는 `isLoggedIn`이 `true`인 경우 `username`을 JohnDoe로 설정하고, 그렇지 않은 경우에는 Guest로 설정합니다. 이렇게 동적으로 값을 할당할 수 있습니다.
React에서 조건부로 속성을 추가하는 방법에는 다양한 방법이 있지만, JSX의 조건문과 JavaScript의 조건문을 사용하는 것이 가장 일반적입니다. 이를 통해 컴포넌트를 조건에 따라 동적으로 렌더링하고, 필요한 속성을 추가할 수 있습니다.
이와 같이 React 컴포넌트에서 조건부로 속성을 추가하는 방법에 대해 알아보았습니다. 이를 통해 성능을 개선하거나 사용자 경험을 향상시키는 등 다양한 상황에서 유용하게 활용할 수 있습니다.