React - CSS작업

오늘은 기존에 작업을 하던 ToDo List React App에 CSS작업을 해보았습니다.

 

 

바로 결과 화면을 보여드리겠습니다.

 

ToDoList 페이지

 

디자인 센스가 없어 일단 색 테마는 인스타그램의 AwesomeColor 님 게시물에서 가져와서 나름대로 채도 조절을 하여 진행해보았습니다.

 

CSS를 적용하면서 추후에 넣을 기능들을 고려하여 추가하기도 하고, 변경하기도 한  부분이 많아졌습니다.

제 GitHub에 모두 올려 두었으니 시간을 절약하고자 하신다면 참고하셔서 본인의 기호대로 재정의 하시는 것도 좋을 것 같습니다.

 

기능적으로 추가한 것은 ToDoTemplate에서 할 일을 입력받기 위해서 input tag를 사용하였는데, '오늘의 할 일'이라는 placeholder가 입력이 있기 전까진 사라지지 않았습니다.

 

그래서 저는 input에 focussing이 발생하면 placeholder가 사라지고, outFocussing이 일어나면 placeholder가 다시 생기게 만들고 싶었습니다.

 

이때 사용하는 것이 onFocus와 onBlur라는 event처리 속성이었습니다.

다음과 같이 input tag를 수정하여 원하는 결과를 얻을 수 있었습니다.

 

<form className="template-Form">
  <input
    type="text"
    placeholder="오늘의 할일"
    onFocus={e => (e.target.placeholder = "")}
    onBlur={e => (e.target.placeholder = "오늘의 할일")}
  />
</form>

 

위의 코드에서 onFocus와 onBlur를 보시면, 화살표 함수를 사용하고 있습니다.

e라는 매개변수가 사용되는데, 이는 매개변수를 전달해 주고, target함수를 이용해서 event가 발생하는 대상을 찾을 수 있습니다.

그 결과 input tag를 반환해주었기에 placeholder의 내용을 변경하여 input을 지목하거나 아닌 경우의 상태를 변경할 수 있게 됩니다.

 

 

 

---

# 참고 자료

 

 

 

 

 

 

---

# 작성 록

 

2020.03.16

 

CSS는 역시 아직 어렵습니다. 그래도 이것저것 해보면서 바로바로 반영되는 모습을 보면 재밌습니다. React를 좀 잘 다룰 줄 알게 된다면 , StyledComponent, MaterialUI 등등 여러 가지를 사용해봐야겠습니다.