React에서 삼항 연산자 사용

1. React에서 삼항 연산자 사용
2. JSX에서 삼항 연산자 사용

React는 기본 HTML 웹사이트보다 더 많은 기능을 갖춘 사용자 인터페이스를 구축하는 데 사용되는 프레임워크이지만 여전히 CSS 스타일을 사용하여 요소의 모양을 변경할 수 있습니다.

특히 삼항 연산자를 사용하여 동적 값을 생성할 수 있습니다.

React에서 삼항 연산자 사용

React 애플리케이션은 일반적으로 JSX라는 템플릿 언어로 작성됩니다. 여러 면에서 HTML과 유사하지만 더 많은 기능을 제공합니다.

JSX 내에는 React 개발자가 조건을 설정하는 여러 가지 방법이 있습니다. if/else 또는 switch 문을 사용할 수 있지만 세 번째 방법은 삼항 연산자입니다.

삼항 연산자는 조건을 설정하고 참 또는 거짓에 따라 특정 값을 반환하는 매우 간단한 방법입니다. 이는 동적 클래스를 설정하거나 동적 인라인 스타일을 적용하거나 문자열 값을 조건부로 렌더링할 수 있습니다.

삼항 연산자를 사용하여 애플리케이션에 사용자 지정 기능을 추가할 수도 있습니다.

return 문 외부에서 React에서 삼항 연산자 사용

React는 JavaScript 기반 프레임워크이므로 return 문 외부에서 일반 JavaScript를 사용할 수 있습니다. if/else 또는 switch와 같은 모든 조건을 여기에서 설정할 수 있습니다.

이 예에서는 삼항 연산자를 사용하여 className 특성에 대한 동적 값을 생성합니다. 문자열이 있고 또 다른 문자열인 삼항 연산자의 결과를 추가합니다.

예:

export default function App() {
    const [night, setNight] = useState(true);
    const classNames = "base " + night ? "nightmode" : "";
    return (
        <div className={classNames}>
            <h1>Hello, World</h1>
        </div>
    );
}

이 예제에서는 삼항 연산자를 사용하여 <div> 컨테이너에 대한 클래스 이름을 조건부로 생성했습니다. 이 라이브 데모에서 App 구성 요소의 모양을 확인할 수 있습니다.

classNames 변수의 최종 값은 night 상태 변수의 값에 따라 달라집니다. 기본적으로 night 변수의 값을 true로 설정합니다.

setNight() 함수를 사용하여 해당 값을 변경하지 않는 한 삼항 연산자는 'nightmode' 문자열 값을 반환합니다.

JSX에서 삼항 연산자 사용

JSX는 React 애플리케이션을 구축하기 위한 기본 템플릿 언어입니다. JSX 내에서 중괄호를 사용하고 그 사이에 삼항 연산자를 포함하여 유효한 JavaScript 표현식을 작성할 수 있습니다.

삼항 연산자를 사용하여 React에서 동적 클래스를 구성할 수 있습니다. 짧고 간단한 구문입니다.

먼저 true 또는 false를 평가하고 뒤에 물음표를 표시하는 JavaScript 표현식을 작성해야 합니다.

그런 다음 콜론으로 구분된 두 개의 값을 갖게 됩니다. 조건이 참이면 첫 번째가 반환되고 거짓이면 두 번째가 반환됩니다.

예:

export default function App() {
    const [night, setNight] = useState(true);
    return (
        <div className={"base " + night ? "nightmode" : ""}>
            <h1>Hello, World</h1>
        </div>
    );
}

이렇게 하면 동적 값을 인라인으로 생성할 수 있습니다. 삼항 연산자를 사용하여 텍스트를 동적으로 렌더링할 수도 있습니다. 예를 들어, 오류가 있을 때 오류 텍스트를 출력합니다.

예:

export default function App() {
    const [night, setNight] = useState(true);
    const [error, setError] = useState(false);
    const classNames = "base" + night ? "nightmode" : "";
    const handleInputChange = (data) => {
        if (data.indexOf("@") == true) {
            return null;
        } else {
            setError(true);
        }
    };
    return (
        <div>
            <div className={classNames}>
                <h1>Hello, World</h1>
            </div>
            Enter your email address:
            <input onChange={(e) => handleInputChange(e.target.value)}></input>
            <p style={{ color: error ? "red" : "black" }}>
                {error ? "please enter a valid email address" : "Everything is fine"}
            </p>
        </div>
    );
}

여기에서 사용자에게 이메일 주소를 입력하라는 메시지를 표시하고 매우 간단한 유효성 검사를 수행하여 입력한 내용이 일반적인 이메일 주소 패턴과 일치하는지 확인합니다.

먼저 <input> 요소를 생성하고 onChange 이벤트를 수신하여 handleInputChange() 이벤트 핸들러를 호출합니다. 텍스트 입력 요소에 입력하는 모든 것은 이벤트 핸들러에 인수로 전달됩니다.

이벤트 핸들러에서 간단한 if/else 문을 사용하여 사용자가 제공한 값을 확인했습니다. ‘@’ 기호가 포함되어 있으면 값이 테스트를 통과하고 유효한 이메일 주소라고 가정할 수 있습니다.

그렇지 않은 경우 setError 기능을 사용하여 경보를 울립니다.

사용자에게 경고해야 하는지 여부를 나타내는 부울인 error 상태 변수를 사용했습니다. 또한 이 상태 변수의 값을 업데이트하는 데 사용되는 setError 함수를 정의했습니다.

마지막으로 삼항 연산자를 사용하여 유효한 이메일 주소 입력에 대해 사용자에게 경고하는 텍스트를 표시해야 하는지 여부를 확인했습니다. 오류 상태 변수가 참이면 삼항 연산자가 경고 메시지를 반환합니다. 그렇지 않은 경우 'Everything is fine' 문자열을 반환합니다.

또한 UX에 대한 추가 이점에 대한 경고 메시지가 포함된 경우 텍스트를 빨간색으로 만들기 위해 조건부로 스타일을 적용합니다. 그렇지 않으면 기본 검정색으로 유지됩니다.