React에서 글꼴 크기를 동적으로 변경

1. React에서 글꼴 크기를 동적으로 변경
2. 삼항 연산자를 사용하여 React에서 동적 글꼴 크기 생성

유연성과 사용자 정의 가능성은 React의 가장 좋은 기능 중 하나입니다. 개발자는 구성 요소를 동적으로 숨기고 표시할 수 있으며 특정 스타일이나 클래스를 적용(또는 적용하지 않음)할 수도 있습니다.

이 기사에서는 React에서 글꼴 크기를 변경하기 위해 인라인 스타일을 생성하는 방법을 보여줍니다.

React에서 글꼴 크기를 동적으로 변경

동적 인라인 스타일 값을 적용하는 방법에는 여러 가지가 있습니다. 숫자 값을 포함하는 변수를 가질 수 있으며 글꼴 크기를 해당 숫자로 설정할 수 있습니다.

이 변수는 구성 요소에 소품으로 전달되거나 사용자 입력을 저장할 상태 변수를 만들 수 있습니다.

예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [size, setSize] = useState(12);
  return (
    <div className="App">
      <label for="fontSize">Specify the font size</label>
      <br></br>
      <br></br>
      <input
        type="text"
        name="fontSize"
        onChange={(e) => setSize(e.target.value)}
      ></input>
      <p style={{ fontSize: `${size}px` }}>Text with dynamic font size</p>
    </div>
  );
}

CodeSandbox에서 라이브 데모를 볼 수 있습니다.

이 경우 useState() 후크를 사용하여 글꼴 크기의 픽셀 수인 size와 이 값을 업데이트하는 데 사용되는 함수를 포함하는 setSize 변수의 두 가지 변수를 정의했습니다. .

size 변수의 값을 12로 초기화했습니다.

JSX 코드에는 <input> 요소가 포함되어 있습니다. onChange 이벤트 핸들러를 설정하여 입력 필드의 변경 사항을 수신하고 setSize() 함수를 사용하여 상태 변수를 업데이트할 수 있습니다.

마지막으로 인라인 스타일을 설정하여 글꼴 크기를 지정합니다. 이중 중괄호를 사용해야 합니다. 한 쌍은 JavaScript 표현식을 평가하는 데 필요하고 다른 쌍은 객체를 나타내는 데 필요합니다.

템플릿 측면을 사용하여 fontSize 속성 값을 지정합니다. size 상태 변수가 변경되면 fontSize CSS 속성 값도 변경됩니다.

삼항 연산자를 사용하여 React에서 동적 글꼴 크기 생성

React에서 동적으로 글꼴 크기를 생성하는 방법에는 여러 가지가 있습니다. 예를 들어 특정 부울 값이 참인지 거짓인지에 따라 글꼴 크기를 변경할 수 있습니다.

오류 메시지를 표시하려는 애플리케이션이 있다고 가정해 보겠습니다. 오류 메시지를 더 크게 만들고 싶을 수 있습니다.

이 경우 오류가 있으면 true이고 없으면 false인 변수 error를 설정할 수 있습니다. 그런 다음 삼항 연산자를 사용하여 fontSize 값을 생성할 수 있습니다.

예를 살펴보겠습니다.

import "./styles.css";
export default function App() {
  const error = false
  return (
    <div className="App">
      <p style={{ fontSize: error ? "16px" : "12px" }}>Text with dynamic font size</p>
    </div>
  );
}

오류가 있는 경우 단락 요소의 크기는 16픽셀입니다. 그렇지 않으면 12가 됩니다.