이번 주 스터디 내용
- 컴포넌트
- CSS 작성법
컴포넌트
컴포넌트 작성하기
component 파일을 만들어 Hello.js 컴포넌트 생성을 해 보자.
- 첫 번째 구현 방식
const Hello = function(){
<p>Hello</p>;
}
export default Hello;- 화살표 함수 사용하기
// const Hello = () => {
// <p>Hello</p>;
// }
// export default Hello;- 한 줄로 쓰기
export default function Hello(){
return (
<h1>Hello</h1>
);
}어떻게 쓰든 상관없다.
같은 방식으로 Welcome.js 와 World.js 도 구현해 보았다.
// Welcome.js
export default function Welcome(){
return <h2>Welcome!</h2>;
}// World.js
export default function World(){
return <h2>World!</h2>;
}작성한 컴포넌트를 App에서 불러오기
Hello component
import World from './World'
export default function Hello(){
return (
<>
<h1>Hello</h1>
<World/ >
</>
);
}- 위와 같이 컴포넌트 안에 컴포넌트를 여러 개 불러올 수도 있다.
- 그러나 JSX는 하나의 태그만 읽을 수 있기 때문에, 이런 식으로 여러 개의 컴포넌트를 불러오려면 빈 태그
<>나 div 태그<div>로 감싸 주어야 한다.
App.js
import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';
function App() {
return (
<div className="App">
{/* <Hello></Hello> */}
{/* 중간에 들어갈 내용이 없을 때는 self close 해 주는 게 깔끔하다. */}
<Hello />
<Hello />
<Hello />
<Welcome />
</div>
);
}
export default App;- 각주로도 달아두었지만, 중간에 들어갈 내용이 없을 때에는 self close를 해 주는 것이 보기에 깔끔하다.
CSS 작성법
1. 인라인 형식
import World from "./World";
export default function Hello(){
return (
<div>
<h1 style={{
color: "#f00",
borderRight: "2px solid #000",
marginBottom: "30px",
opacity: 0.5,
}}
>
Hello
</h1>
<World/ >
</div>
);
}- 객체기 때문에 중괄호와 낙타 표기법을 사용해 주어야 한다.
- 특별한 이유가 있지 않는 한, 코드 가독성이 떨어지므로 인라인 방식은 잘 사용하지 않는다.
2. 외부 CSS 파일 불러오기
페이지 전체의 CSS가 들어있는 index.css, App의 CSS가 들어있는 App.css를 수정하거나, 컴포넌트 폴더에 컴포넌트명.css를 생성하여 CSS를 작성할 수 있다.
컴포넌트 CSS 중복
그런데 App.css는 사실 App의 CSS에만 영향을 미치는 것이 아니라, 전체적으로 영향을 미친다.
예를 들어, App.css에 box라는 클래스를 다음과 같이 작성했다고 하자.
(...)
.box{
width: 100px;
height: 100px;
background-color: red;
}그리고 이번에는 Hello.js 컴포넌트를 꾸며 주는 Hello.css 파일을 component 폴더에 생성하여, 같은 이름의 box라는 클래스를 작성한다.
import "./Hello.css";
(...)
.box{
width: 200px;
height: 50px;
background-color: blue;
}이렇게 작성하고 빌드해 보면, 실행 결과는 다음과 같다.
// App.js 전체 코드
import './App.css';
import Hello from './component/Hello';
function App() {
return (
<div className="App">
<Hello />
<div className='box'>App</div>
</div>
);
}
export default App;개발자 도구를 열어서 확인해 보면, 클래스의 이름이 같기 때문에 오버라이딩되어 발생하는 문제라는 것을 알 수 있다. CSS 파일들이 각 컴포넌트들에 종속되는 것이 아니라, <head> 안에 다같이 작성되기 때문에 전체 페이지에 영향을 미치는 것이다.
3. module.css
이와 같은 문제를 해결하기 위해 module css를 사용할 수 있다.
기존에 작성했던 Hello.css를 Hello.module.css로 수정해 보자.
(파일명 module.css 앞에는 보통 컴포넌트 이름이 쓰인다.)
그 다음 Hello.js 에서 수정한 CSS 파일을 불러온다.
import styles from "./Hello.module.css"; //styles 라는 객체 생성
export default function Hello(){
return (
<div>
<h1 style={{
color: "#f00",
borderRight: "2px solid #000",
marginBottom: "30px",
opacity: 0.9,
}}
>
Hello
</h1>
<div className={styles.box}>Hello</div> //중괄호
</div>
);
}App.module.css 파일을 생성하여 App.js 에도 같은 처리를 해 주자.
// App.module.css
.box{
width: 100px;
height: 100px;
background-color: red;
}// App.js
import './App.css';
import Hello from './component/Hello';
import styles from './App.module.css'
function App() {
return (
<div className="App">
<Hello />
<div className='box'>App</div>
</div>
);
}
export default App;
그럼 이렇게 원래 의도했던 바대로 CSS가 적용된다.
개발자 도구로 확인해 보면, 해당 컴포넌트에 특화된 이름으로 이렇게 들어가 있다. 언더바 뒤에는 해시값.
이처럼 동일한 이름으로 클래스를 만들어도 스타일을 다르게 적용할 수 있다.
실무에서 가장 많이 고민되는 부분인 오버라이딩, 네이밍, 상속에 대한 부분을 말끔하게 해결할 수 있어 편리하다. 컴포넌트 단위로 관리되는 것 또한 장점.
이번 주의 느낀 점
쓰면서 공부하니까 확실히 정리가 되는 것 같아서 좋다. 기초 개념을 좀 탄탄하게 잡고 넘어가고 싶은데... 진도에 쫓기다 보니 뭔가 뼈대가 부족하다는 느낌.
그리고 블로그를 좀 가독성 좋게 쓰고 싶네요.
공부하고 블로그를 쓰는데 시간을 많이 들인 느낌이네요!
블로그만 읽고도 직접 공부한 것처럼 과정이 쫙 이해됐어요:)
개인적으로 세부적인 사항을 인라인 css로 해결하려고 했다가 수정이 어려운 경우가 많았어요
당연한 거지만 꼭 필요한 경우에만 인라인 형식을 사용하는 게 좋을 거 같아요!