프리온보딩 시작
오늘 첫 시작이자 첫 강의가 있었다. 오늘부터 원티드 프리온보딩 과정에 따라 과제를 수행하고 강의를 들을텐데 내용들을 블로그에 개인적으로 기록해나가야겠다.
css
css-in-js?
그동안은 styled-component가 js와 함께 사용하기도 하고, css파일도 따로 안만들어도 돼서 좋다고 생각했다. 하지만 오늘 단점 또한 알게 됐다.
단점:
- HTML태그를 너무 추상화시킨다.
- 한 파일 안에 로직과 스타일이 뒤섞인다
사용하면서도 이름짓는 것에 어려움을 느꼈는데 결국 원래 HTML태그가 무엇인지, 리액트 컴포넌트인지 스타일을 나타내는지 알 수 없게 되어 가독성을 해쳤다.
앞으로는 SCSS를 많이 다뤄볼 것 같은데 다양한 스타일의 css를 익혀야겠다.
:focus-within
:focus-within
의사 클래스로 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타낸다. 자기 또는 자손 중 하나가 :focus와 일치하는 요소를 나타낸다.
email 유효성을 검사한 후 그에 따라 유효 여부를 출력해주는 내용이 있었는데 state로 관리하며 별도의 태그를 만들어 텍스트를 바꿔가며 구현했다. 하지만 :focus-within과 + selector를 사용해 포커스된 인풋의 다음 요소를 골라 스타일을 변경하여 쉽게 구현할 수 있다고 한다. 다시 구현할 때 도전해봐야겠다.
target과 currentTarget
- event.target
target은 이벤트가 발생한 대상 객체를 가리킨다. - event.currentTarget
currentTarget은 이벤트 핸들러가 부착된 대상만을 가리킨다.
따라서 이벤트를 위임받은 자식 요소를 클릭할 때 target은 그 대상을 바로 반환하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.
<button onClick={handleClick}>
<span>child tag</span>
</button>이 요소를 클릭 했을 때 target은 span을 가리키지만 currentTarget을 사용하면 button을 가리키게 된다. 이를 잘 알고 이벤트를 사용할 때는 currentTarget을 적절히 활용하는것이 좋겠다.
setState
이전 state를 바탕으로 변경하여 새로운 state를 만들려면
setState(!state); 이렇게 바꾸는 것 보다
setState((prevState) => !prevState); 이렇게 사용하는것이 더 안정적이라고 한다.
구체적인 동작은 더 살펴봐야겠다.
svg 사용
svg를 react component처럼 사용할 수 있다.
svg태그를
export {ReactComponent as IconName} from './icon.svg';이렇게 내보내고 import하여 리액트 컴포넌트처럼 사용하면
<IconName className='class-name' />이렇게 className을 줄 수 있고 style을 바꿔 같은 svg 아이콘이라도 색상, 스타일이 다르게 만들 수 있어 유연하게 사용 할 수 있다.
도움
