지난주 리액트 스터디에서는 따라 하며 배우는 리액트 A-Z에서 섹션 2. 간단한 To-Do 앱 만들며 리액트 익히기
를 학습하고 간단한 ToDo 앱을 만들어보았다.
완성된 결과물은 아래와 같다.
ToDo 앱의 주요 기능으로는 이렇게 세 가지가 있다.
이번 포스팅의 목표는 이전 코드를 최대한 보지 않고 검색과 내 지식만으로 (삽질하며) 만들어보는 것이다!
위의 세 가지 기능을 모두 구현하되, 이전에 강의를 들으며 정리한 내용과 코드는 최대한 보지 않고 만들어보려고 한다. 이를 하는 이유는 강의를 듣고 ToDo 앱을 만들었을 때는 코드를 따라 친 느낌이 들었고 완전히 내 것이 되지 않았다고 느꼈기 때문이다.
그래서 힘들겠지만 기억과 검색으로 ToDo 앱을 만들어보려고 하는데, 강의에서는 클래스형 컴포넌트를 썼지만 나에겐 클래스형 컴포넌트가 익숙하지 않아 함수형 컴포넌트로 만들 것이다.
한 포스팅에 모든 내용을 담으려고 했으나, 생각보다 시간이 오래 걸릴 것 같고 또 내용도 길어질 것 같아 여러 포스팅에 나누어 쓰려고 한다. 이 포스팅은 UI 편으로, 1편이다.
ToDo 앱이 화면의 중간에 떠있는 것처럼 보이게 컨테이너 박스를 만들고 싶었다.
페이지 중앙에 정렬하기 위해 margin: 0 auto;
를 썼고, 컨테이너 박스에 width: 600px;
로 고정된 너비를 지정해 줬다.
배경화면의 색을 aliceblue로 지정했는데, JSX 파일에 body라는 태그가 따로 쓰여있지 않아도 css로 body 태그에 배경 색을 background-color: aliceblue;
이렇게 지정해 주면 ToDo 앱의 배경 색이 바뀐다.
// App.js
import './App.css';
function App() {
return (
<div className='container'>
<div className='contents'>
<h1>할 일 목록</h1>
</div>
</div>
);
}
export default App;
// App.css
body {
background-color: aliceblue;
}
.container {
/* 페이지 중앙 정렬 */
margin: 0 auto;
/* 단위로 em이나 rem을 쓰는게 좋다고 들었음 */
margin-top: 4rem;
width: 600px;
background-color: #fff;
/* 그림자 */
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
/* 테두리 둥글게 */
border-radius: 20px;
}
.contents {
padding: 2rem;
}
body {}
를 나도 모르게 .body {}
라고 써서 한동안 적용이 안됐었다. .
는 className으로 지정한 이름 앞에 붙이는 건데, 자주 쓰다 보니 body라는 태그를 선택할 때에는 .
를 붙일 필요가 없는데 붙였던 것 같다.css를 작성할 때 px 등의 단위가 있음에도 rem을 썼는데, 언젠가 px를 쓰는 것보다 rem이나 em과 같은 상대적인 단위를 쓰는 게 좋다고 들었기 때문이다. 그래서 찾아봤다.
EM vs REM vs PX - Why you shouldn't "just use pixels"라는 글의 번역본은 다음과 같이 이야기한다.
16px(브라우저의 기본 폰트 크기) * 62.5% = 10px
로 지정해 준다. 이유는 rem을 쓸 때 단순히 우리가 10진수로 계산하기 편해서이다. 1rem이 16px 일 때보다 10px 일 때 rem을 계산하기 쉬울 것이다.html {
font-size: 62.5%;
}
목록을 만드는데, 또 css 부분에서 잘 안돼서 삽질을 했다.
x 버튼과 입력 버튼이 오른쪽으로 가게 하고, 중간에 있는 요소는 창 크기가 커지고 작아짐에 따라 유동적으로 변화하게 하고 싶었으나 아래와 같이 요소가 왼쪽으로 몰려 있었다.
이를 어떻게 해결했는지 과정을 아래에 적어보았다.
아래의 사진처럼 버튼을 각각 오른쪽 정렬하고, 중간의 요소는 창 크기가 커지고 작아짐에 따라 유동적으로 변화하게 하고 싶었다.
일단 삭제 버튼은 float
를 사용하여 해결했다.
.deleteBtn {
float: right;
}
입력창과 입력 버튼은 flex
를 이용했는데, 각각 flex 값으로 10과 1을 줘서 10:1로 정렬되게 했다. 그리고 둘 사이에 간격이 있었으면 좋겠어서margin-right
으로 간격을 줬다.
이때 간격을 flex에서 지정해 줄 수 있지 않을까 해서 space-between 등을 이용해서 정렬하려고 했지만, 실패하여 margin-right
으로 간단히 설정했다.
.inputs {
display: flex;
font-size: 1.8rem;
}
.inputText {
flex: 10;
margin-right: 10px;
}
.inputSubmit {
flex: 1;
font-size: 1.5rem;
}
중요한 부분은 아닌 것 같지만, 이전 코드와 달리 이번에 쓴 코드에서는 입력 버튼을<input type='submit />
대신<button type='subit /button>
로 만든 것을 발견했다. 찾아보니 둘은 같은데, 전자가 더 많이 쓰인다고 한다. 그래서 나도 입력 버튼으로 <input type='submit value='입력' />
을 쓰기로 했다.
이번 포스팅에서는 리액트로 ToDo 앱 만들기 UI 편을 작성해 보았다. 다음 포스팅에서도 마찬가지로 혼자 코드를 짜보는데 할 일 목록 추가하기, 체크함과 동시에 완료 표시하기, 할 일 목록 지우기 등의 기능 중 몇 가지 기능을 구현해 보고 그 과정을 포스팅할 것이다!