스타일링의 중요성

---

새로운 개념

스타일링?

Sass?

styled-components?

번들사이즈?

 

 

---

스타일링은 왜 하는가?

웹이 스타일링 없이 글만 작성되있으면 한눈에 알아보기 힘들고 당황스럽다.

효율과 사용성을 위해 사용, 좋은 앱을 만들기 위한 것,

 

결국 사용자에게 더 나은 UI를 구현하기 위한 방법이다!

 

정말 말 그대로 웹을 스타일링 하는것을 의미!

 

---

스타일링의 방법

1. CSS import

: css 파일을 따로 만들어 import해서 css 파일을 가져옴

 

Button.JSX

import 'button.css' // button.css를 가져옴

funtion Button({ children }) { // chidren이라는 컴포넌트를 사용될 때 함수 구현
	return (
    <button className="button"> // html button태그 생성, class 이름 button으로 속성 부여 ?
    	{children} // 버튼 이름은 children 컴포넌트를 사용될 때 컴포넌트안의 내용
    </button>
    )
}

 

Button.CSS

.button {
	
}

 

APP.JSX

import Button from './button' // Button 컴포넌트를 가져옴

funtion App() { // app 함수 정의
	return (
		<div>
			<Button>Submit</Button> // Button 컴포넌트 호출하여 Submit 전달
		</div>
	)
}

// 결과적으토 Submit 버튼이 렌더링 됨

 

css import시 namespace를 나눌 수 없음

namespace? 

 

: 해결 방법? 클래스 명을 다르게 할 수 있으나 관리가 어려워져서 해결 방안은 CSS module !

 

궁금한점

-  웹 제작시 다양한 버튼을 있을텐데 Button 생성 컴포넌트를 하나만 만들어서 계속 호출해 다양한 버튼을 Submit부분에 넣어서 만든면 되는 것인지?

- 만약 위가 맞다면 다양한 버튼을 만들때 한 파일에 계속 만드는 건지? 아니면 기능별 파일로 구분해서 그때마다 컴포넌트 계속 가져와 호출하여 사용하는 것인지?

 

 

2. CSS module

namespace해결 방안, css명이 길어짐,  .module.css로 작성, hash값(랜덤 문자열)이 붙여진다. 스타일이 겹쳐지지 않는다.

 

InputWithButton.jsx

import styles from "./input-with-button.module.css"; // module이 파일명 안에 들어옴

export function InputWithButton() {
    return (
        <div className={styles.container}>
            <input type="text" name="text" className="{styles.input}" />
            <button className={styles.button}>Submit</button>

        </div>
    )
}

// styles.class명을 사용해 각각 다른 클래스명을 만들어 각각의 스타일을 적용

 

 

3. CSS-in-js

CSS 파일을 따로 작성하지 않고 jsx안에 style을 같이 작성하는 것이다.

언어가 다른데 어떻게 작성할까?

css파일은 문자열로 처리해서 내부적으로 파싱하게된다. 자바스크립트 문법을 그대로 활용이 가능하다! 즉, 변수 선언 가능!

재사용성이 높아짐, 반복문, if문 자유롭게 활용해 css 구현이 가능하다.

 

InputWithButton.js

// 스타일 선언

import styled from "styled-components" // 라이브러리를 통해 styled 이름으로 가져와 jsx안에 css를 사용 가능하도록 함

// styled 객체 안에는 div, input, button element가 선언

const Container = styled.div`
    background: rgba(0, 0, 0, 0.05);
    margin: 10px;
    padding: 5px;
`;

const Input = styled.input`
    border: none;
`;

const Button = styled.button`
    background: blue;
`;


function InputWithButton() { // 함수를 사용해 태그를 만들면 css이 호출되어 스타일 구현
	return (
        <Container>
            <Input />
            <button>Styled Button</button>
        </Container>
    );
}

궁금한점

- 변수로 선언한 스타일을 어떻게 적용시키는지?

: 함수로 변수를 선언한 태그를 사용하면 css가 적용된다.

- css를 js에 바로 작성하는데 import해오는 것은 어떤건지?

: import styled from "styled-components"에서 "styled-components"는 css를 jsx에서 사용할 수 있는 라이브러리를 선언한 것이며 styled의 이름으로 가져와서 사용하는 것이다. styled는 다른 이름으로 사용해도 되고 한번만 선언하면 된다.

- 컴포넌트를 만들 때 CSS-in-js 방식을 써서 구현하는게 좋은지?

 

 

---

새로 알게된 개념

 

컴포넌트: 컴포넌트를 구분하는 기준 "단일 책임 원칙"이다.

즉, 컴포넌트가 하나의 구체적인 기능이나 역할을 가지고 있어야 한다는 원칙이 있다.(최소한의 작은 역할 수행): 유지보수가 쉬워진다.

예를들어 버튼 컴포넌트: 버튼을 생성하는 역할

---

JSX: JavaScript XML, JavaScript에서 HTML과 유사한 문법을 사용하여 작성된 코드이다.

React에서 UI를 더 직관적이고 쉽게 작성이 가능하다.

 

---

앞으로의 방향성

프로젝트가 진행 될 때 js안에 css를 넣어서 하는 방법이 재사용성이 높고 유지보수가 쉬운지 ?

css 파일을 따로 만들어 모듈로 관리하는게 효율적인지 ?

: 후자의 선택이 더 재사용성과 유지보수가 높다고 한다!

 

---

느낀점

hmtl, css로만 구현을 하다가 react를 배우니까 정말 지식이 많이 부족한 나에게는 신세계였다. 한번에 작성하는 것도 신기하고 기존의 문법을 완전 파괴하는 것이 아니라 거의 비슷하게 작성해도 돼서 한단계 발전한 느낌이었다. react를 배우고 싶다는 생각은 있었지만 배워야할 커리큘럼을 잘 몰랐어서, 어디서 부터 시작해서 어디서 내용을 참조하는게 좋을지 난감했다. 이번 엘리스 부트캠프를 듣기 정말 잘한 점 중의 하나는 난이도는 정말 높아서 따라가기 힘들지만 프론트엔드 개발자로 나아가기위한 '커리큘럼'을 제공해준다는것이다. 엘리스 뿐만 아니라 다른 부트캠프가 있다면 '커리큘럼'에 대한 고민이 있다면 듣는것을 적극 추천한다. 비록 짧은 시간안에 배워서 난이도가 높게 느껴질 수 있지만, 프로젝트라는 경험을 쌓고 다양한 사람들의 의견과 조언들, 좋은 사람들을 만날 수 있는 최고의 방법이라고 생각한다. 특히 개발자쪽에 지인이 없어서 고민을 혼자 안고 가야했었는데, 그 부분을 정말 시원하게 해소해 주시고 이미 같은 고민을 겪으신 분들이 대부분이시라 너무 감사하게도 잘 설명해주시고 고민에 대한 조언도 아낌없이 잘 해주신다! 지금까지 많이 뒤쳐진다고 생각했는데 프로젝트를 계기로 정말 뭔가를 배우고 성장한다는 느낌을 처음 받았고 공부 방법에 대한 의문점이 해소되고 어떻게 공부해야할지 감이 잡혀간다. 힘든 순간이 많지만 그 순간을 잘 버텨내서 프로젝트를 완성했을 때는 전과 후가 정말 크게 달라 발전해 있는 나를 기대하면서 글을 마무리 합니다.