리액트 문법 [styling]

MARIO·2023년 11월 2일
1

리액트 문법

목록 보기
7/28
post-thumbnail

Styling

컴포넌트에 css 스타일을 적용시켜 꾸미는 방법

이렇게 꾸미기 위해 아래와 같이 코드를 작성

방법 1.
return문 안에 div에 각각 변수로 만든 스타일들을 넣어줌 style={변수명}
css파일외에 스타일 적용시 속성값을 ""로 묶어줘야함

  • style={style}은 전체에 적용되는 속성
  • style={squareStyle}은 각 박스에 적용되는 속성

방법 2.
app.css를 import시켜 div에 className을 지정한뒤 app.css에서 스타일을 적용시키는 방법(기존html에 css적용시키는 방법과 비슷)

하지만 해당 방법은 중복되는 값이 너무 많기 때문에 리팩토링 필요!

따라서 반복되는 컴포넌트들을 처리하는 방법이 필요!(map과 filter...)
(반복되는 컴포넌트 처리파트에서 설명.)

profile
매사에 열심히 하도록.

0개의 댓글