logo

TechCodeview

React의 인라인 스타일

소개

단일 페이지 앱이 거의 필요하지 않은 프런트엔드 프로젝트에서는 DOM 요소의 인라인 스타일이 대상 요소의 >' 속성입니다.

그러나 React에서는 인라인 스타일 지정과 관련하여 상황이 상당히 다릅니다. 이 가이드에서는 사용자 프로필 카드 구성 요소를 만드는 실제 예를 사용하여 이를 달성하는 데 중점을 둡니다.

React의 구성 요소 스타일링

외부 스타일시트와 함께 classname 속성을 사용하여 React 구성요소의 스타일을 지정하는 일반적인 방법을 이미 알고 계실 것입니다.

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

인라인 스타일

인라인 스타일로 동일한 결과를 얻는 것은 상당히 다르게 작동합니다. React에서 인라인 스타일을 사용하려면 Camel 속성이 있는 JavaScript 객체를 허용하는 style 속성을 사용하세요. 예:

 function MyComponent(){ return Inline Styled Component }

React가 추가하기 때문에 패딩 값에는 단위가 없습니다. 'px ' 일부 숫자 인라인 스타일 속성에 대한 접미사입니다. 'em', 'rem' 등 다른 단위를 사용해야 하는 경우 해당 값을 문자열로 명시적으로 단위를 지정하세요. 이것을 패딩 속성에 적용하면 패딩이 되어야 합니다. '1.5em' .

또한 이러한 스타일에는 공급업체 접두사가 자동으로 지정되지 않으므로 공급업체 접두사를 수동으로 추가해야 합니다.

가독성 향상

스타일이 너무 많아지고 모든 것이 투박해지면 MyComponent의 가독성이 급격히 떨어집니다. 아래와 같이 스타일은 객체일 뿐이므로 구성 요소에서 제거할 수 있습니다.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

카드 구성 요소 만들기

사용자 카드 구성 요소를 만들어 보겠습니다.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

경험 법칙

공식 React 문서에서는 프로젝트 스타일링의 주요 수단으로 인라인 스타일을 사용하는 것을 비난하고 대신 className 속성을 사용할 것을 권장합니다.

참고 설명서의 일부 예에서는 편의를 위해 스타일을 사용하지만 일반적으로 스타일 속성을 스타일 지정 요소의 기본 수단으로 사용하는 것은 권장되지 않습니다.

대부분의 경우에, 수업 이름 s는 외부 CSS 스타일시트에 정의된 클래스를 참조해야 합니다. 스타일은 렌더링 시 동적으로 계산된 스타일을 추가하기 위해 React 앱에서 자주 사용됩니다.