리액트 컴포넌트들 스타일링 방법 2가지 (styled-components, css파일에 때려박기 )

리액트 프로젝트를 진행하면 많은 컴포넌트가 모여서 애플리케이션을 이루고 각각의 컴포넌트들을 배치 혹은 꾸며주기 위해 스타일링을 해줄 때가 있다. 크게 2가지 방법이 있는데 이 2가지중 편한 것을 선택해서 진행하면 되겠다. 

 

 

1. styled-component 

 

우선 styled-components 라는 npm 패키지명을 가지고 있기 때문에 npm 명령어를 이용해서 패키지를 설치해준다. dependency에 추가 된 것을 확인 한 뒤에 

import styled from 'styled-components';  // 1. 컴포넌트의 상단에 임포트 해준다

styled.div`                // 요런식의 문법
	width:80px;
    font-size: 50            
`;          

styled.Remove`           // 밑에서 리턴할 컴포넌트명 기재 가능
	height:20px;
`;
const anything = () => {
	return <>
    	<h1>스타일 컴포넌트 </h1>
        <Remove />
    </>
}

export ~~~

식으로 작성이 가능하겠고

 

 

2. css 파일에 다 때려박기 

 

이건 컴포넌트 리턴시에 html 태그를 이용해서 넘겨줄 때 클래스명을 붙여주고 관련된 스타일링은 하나의 css 파일에 다 정리해서 진행하면 되겠다.

 

 

return (
            <div>
                <form onSubmit={onSubmit} className='form'>
                    <input type='text' name='text' placeholder='Search Users...'
                    value={text}
                    onChange={onChange}
                    className="input search"/>  // 
                    <input type='submit' value='Search' 
                    className='btn btn-dark btn-block' />
                </form>
            </div>
        )

등 컴포넌트 파일안에 스타일링을 해주는 것이 아니라 따로 css파일을 임포트하고 그 파일에 관련된 스타일링을 다 때려박으면 되겠다.