우리는
css 코드를 사용할 때
기본 css를 사용하면 적어도 잠재적으로는
컴포넌트에 대하여 스코핑이 지정되지 않는다는 단점을 가집니다
따라서 이것에 대해 우리가 스코핑을 달성하고 싶다면
어떠한 것을 할 수 있을까요?
하나의 솔루션은 inline(인라인) 스타일로 바꾸는 것입니다
따라서 예를 들어서 그들이 적용해야 할 paragraph에
이 paragraph 인라인 스타일을 적용하기 위해서입니다
그리고 인라인 스타일은
css 파일에서 css 스타일을 정의하는 것 대신에
jsx 코드로 직접적으로 적용하는 것을 의미합니다
여러분은 이것을 스타일 속성을
리액트에서 jsx 요소에 설정하는 것을 통해 할 수 있습니다
이것은 여러분이 vanilla html에 스타일 속성을 설정하는 것과 같습니다
스타일 속성은 문자열을 차지하지 않습니다
예를 들어 color : red를 포함하고
비록 이것이 단지 HTML에서
이 속성을 사용하는 방법일지라도 말입니다
그러나 만약 여러분이 이것을 이 리액트 앱의
jsx 코드에서 사용하고자 한다면
스타일 속성이 문자가 아닌
스타일 속성이 문자열이 아닌 값으로 된
매핑을 기대한다는 에러를 보게 됩니다
따라서 이것은 여러분이 리액트 앱의 jsx에서
스타일 속성을 활용하는 방법이 아닙니다
대신에 스타일 속성은 동적 값을 가집니다
그래서 우리는 중괄호가 필요하고
그런 후 우리는 값의 객체를 스타일 속성에 전달합니다
이것을 이해하는 것은 중요합니다
여기 있는 것은 스타일링에 사용하는
특별한 이중 중괄호 문법이 아닌
표준 동적 값 문법으로
예를 들어 여러분이 그냥 객체를 숫자나 불리언 대신에
값으로 전달합니다
그리고 이제 이 이 객체가
여러분이 이 paragraph의 키-값 쌍으로 적용될
스타일을 설정하는 곳입니다
이를 위해 예시로
여러분이 이 paragraph에 빨간 색을 주고 싶다면
key로서 컬러를 추가하고
그리고 우리가 자바스크립트에 있기에 콜론을 더하고
그리고 여기에 이 상황에서는 red이고
문자로서 값을 더합니다
이로써 이 jsx 코드에
이것이 인라인 스타일로 적용될 것입니다
이것을 저장하면
우리는 당연히 이 paragraph 가 다시 빨강인 것을 볼 수 있습니다
그리고 이것은 당연히 색에만 적용되는 것이 아닙니다
어떤 css 스타일이든 이렇게 설정할 수 있습니다
예를 들어서 텍스트 조정도 같습니다
여기서는 여러분은
text-align이 자바스크립트에서 유효하지 않는
속성 이름일 수도 있다는 것을 기억해야 합니다
따라서 여러분은 이것을 작은 따옴표로 묶거나
혹은 더 일반적이고 추천되는 방법으로
대시(-)를 빼고
다음 단어를 대문자로 시작하는
camel case notation (카멜 표기법)으로
바꿀 수 있습니다
그런 후 여러분은 이를 왼쪽으로 맞춥니다
이를 통해
여기는 사실 아직 중간으로 정렬되어 있습니다
왜냐하면 사실 여기 스타일링은
필요로 하지 않았습니다
비록 여러분이 적어도 여기에 적용했고
여기서 볼 수 있음에도 말입니다
이 앱에서는 이것은
이 paragraph에 효과를 미치지 않습니다
왜냐하면 헤더가 Flexbox를 사용하고
그 요소들을 자동으로 중간 정렬하기 때문입니다
그러나 여러분이 그것을 비활성화 한다면
이제 왼쪽으로 가는 것을 볼 수 있습니다
그러나 여기서는 제가 다시 로딩하고 이전 스타일로 돌아가지만
이것이 여러분이 인라인 스타일링을 적용하는 방법이고
이 접근의 한 가지 장점은
당연히 여러분이 더하는
jsx 요소에만 영향을 미친다는 것입니다
따라서 인라인 스타일을 사용하는 것은 몇 가지의 장점과
단점을 가집니다
한 가지 장점은 여러분이 보시다시피
쉽게 추가할 수 있는 것이고 여러분이 인라인 스타일로 더하는 것이
단지 여러분이 추가하는 요소에만 영향을 미치고
다른 요소에는 적용되지 않는다는 것입니다
당연히 이것은 단점도 있습니다
왜냐하면 css 를 알게 되면
인라인 스타일을 사용할 때
하나의 단점은
모든 요소를 개별적으로 스타일 해야 한다는것입니다
여기서 여러분이 스타일 파일을 사용한다면
여러분은 한 가지 규칙으로 모든 paragraph를 타겟할 수 있고
여러분은 인라인 스타일의 케이스 경우
각각의 paragraph에 이것을
추가하지 않아도 됩니다
우리가 여러개의 paragraph를 가진다면
모든 것이 여기 이 스타일을 가질 것이고
우리는 여기 객체와 함께 이
스타일 속성을 복사하고 이 스타일을 가져야 하는
모든 paragraph에 이를 붙여 넣기 해야 합니다
그러고 여러분이 스타일링을 바꾸고 싶다면
여러분은 똑같이 모든 paragraph에 이것을 다시 해야 합니다
그러므로 이것은 당연히 여기서 단점입니다
그리고 인라인 스타일링을 사용할 때의 또 하나의 잠재적 단점은
css 와 jsx코드에 구분이 없다는 것입니다
모든 css 코드는 jsx 코드 내에 존재합니다
즉 jsx 코드르 쓰는 사람은 아마도
스타일링을 추가하는 사람이 되어야 한다는 말입니다
혹은 여러분과 여러분의 디자이너가 계속하여
그 파일을 바꿔가면서 일해야 합니다
왜냐하면 둘 다 모두 jsx 코드에 작업해야 하기 때문입니다
여러분은 구조와 로직에
그리고 동료는 스타일링에
그리고 이것은 불편할 수도 있습니다
그러나 인라인 스타일링은 또 하나의 장점을 가지고 있습니다
저는 이것을 언급하고 싶습니다
우리는 다음 강의에서 이것을 더 자세히 다루겠습니다
인라인 스타일에서는
여러분이 볼 것처럼
스타일을 추가하고 동적으로, 조건부적으로 정확하게 하기 위해 설정하는 것은
꽤 간단합니다