#리액트 #코딩 #프로그래밍
이번 영상에서는 JSX의 속성과 스타일링을 중심으로 알아봤습니다.
HTML에서 JSX로 넘어오면서 몇몇 속성명이 바뀌었습니다. 그 중 'for'는 'htmlFor', 'class'는 'className'으로 사용되며, 이는 자바스크립트에서 예약어로 지정되어 있기 때문입니다.
JSX 속성 값에는 중괄호 표현식이 사용될 수 있습니다. 이 안에는 숫자, 불리언 값부터 삼항 연산자 같은 임의의 자바스크립트 표현식이 들어갈 수 있습니다.
JSX에서 이미지 파일을 사용하기 위해서는 이미지 파일을 import하여 'src' 속성의 값으로 넣어주어야 하는데 이는 빌드 과정에서 파일명이 수정되기 때문입니다.
JSX 요소들에 CSS 스타일을 적용하는 방법으로는 인라인 스타일링과 CSS 모듈이 있습니다. 인라인 스타일링의 경우 객체 형태로 스타일 정보를 작성하며, 이는 외부 변수나 상수에 저장 후에 사용할 수 있습니다.
CSS 모듈은 CSS 스타일이 전역으로 적용되는 것을 방지하기 위한 것입니다. 모듈로 임포트한 스타일은 해당 스타일을 사용하려는 컴포넌트에만 적용되며, 겹칠 우려가 없습니다. 이를 통해 다른 컴포넌트와의 스타일 충돌을 방지할 수 있습니다.
= = =
🏠 얄코사이트: https://www.yalco.kr
📖 얄코 도서: https://www.yalco.kr/book/
🧑🏫 얄코 강의: https://www.yalco.kr/#lectures
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대학생 전체강의 반값할인)
🎥 제대로 파는 자바: • 제대로 파는 자바 - Java 끝장내기
🎥 제대로 파는 파이썬: • 제대로 파는 파이썬 - Python 끝장내기
🎥 제대로 파는 자바스크립트: • (구판) 제대로 파는 자바스크립트 - 고정댓글에 새 버전 링크
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베이스 강좌
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ ReactiveX 강좌)
