[TWIL] 사전 프로젝트를 하며 알게 된 몇 가지 - 1편

context 설명:
create-react-app을 사용해 프로젝트를 진행 중입니다.

 

1. 컬러 팔레트 사용

App.css 에 컬러 팔레트를 만들어두고 css 변수를 불러와서 색상을 지정하고 있다. 혼자 과제를 할 때는 색상 팔레트의 편리함을 크게 느끼지 못했는데 여러 명이서 같이 작업할 때 훨씬 더 빛을 발하는 것 같다. 

 

App.css가 아닌 index.css 에 컬러 팔레트를 지정하면 var()로 불러올 수가 없던데 왜 안 되는건지 잘 모르겠다. (아직 안 찾아봄..🥲)

 

📚 참고자료:

- CSS 변수 합성의 강력함

- CSS 변수와 웹사이트 테마

 

2. 공통 ui 컴포넌트 (버튼) 작성

 

 

 

위와 같이 버튼 컴포넌트를 생성하고, 버튼이 필요한 곳에 아래와 같이 <Button /> 컴포넌트를 호출해서 사용하면 된다.

<Button
	text='Log in'
	path='/users/login'
	addStyle={{
		borderColor: 'var(--powder-500)',
		backgroundColor: 'var(--powder-100)',
		color: 'var(--powder-700)'
	}}
/>

 

기본 버튼이 들어가는 부분이 많고, 일부 버튼에만 다른 스타일이 들어가기 때문에 css 적용까지 한 번에 할 수 있도록 styled-components를 사용해 스타일 속성을 props로 내려주는 방식으로 컴포넌트를 만들었다. 

 

3. 조건부 onClick 실행

위의 공통 버튼 컴포넌트를 작성하면서 고민했던 부분인데, path를 props로 내려보내서 특정 버튼을 눌렀을 때 route의 경로로 이동하게 해주거나 다른 handleClick 함수를 props로 내려보내서 onClick 함수를 조건부로 구현할 수 있다.

onClick={path ? () => goTo(path) : handleClick}

 

4. css module 에서 클래스명 2개 이상 사용하기 - 🔗

    <div className={`${styles.container1} ${styles.container2}`}>

 

5. 여러 개의 input 상태 관리하기

 

 

📚 참고자료:

[벨로퍼트] 여러개의 input 상태 관리하기

 

6. 버튼 요소에는 event.preventDefault() 적용이 안 됨 - 🔗

button 요소에는 default behaviour가 없기 때문에 button이 아닌 form 요소의 onSubmit 함수에 event.preventDefault()를 적용해야 한다.