오늘은 ant-design을 이용해 아이콘을 받아와 사용했다.
아이콘은 다른것과는 다르게 따로 또 설치를 해줘야했다.
아이콘에 이모션주기
아이콘이나 이모티콘 등은 폰트라고 여기고 사이즈나 색을 정해주면된다.
import {가져오는 이모티콘이름} from '@ant-design/icons'
import styled from '@emotion/styled'
const MyIcon = styled(가져온이모티콘이름)지정할스타일
기존의 이모션에 스타일 주는 방법과 같으나 style.태그 대신, styled(가져온 이모션)이렇게 작성하고 벡틱을 넣어준다.
그다음
export default function 함수명(){
return
<>
<원래는 이부분에 아이콘이름이 들어가나 스타일 지정으로 서타일의 이름 여기선 위에서 지정한 MyIcon/>
<>
}
아이콘 사용시 주의해야할점은, 아이콘 태그 자체에 id를 주면 그 태그의 아이디가 들어가는게 아니라 다른 span태그가 생겨 들어가기에 원하는 결과를 얻기가 어렵다.
꼭 id를 줘야한다면 다른태그로 감싸 그 태그에 주도록 한다.
이번에는 어제 과제로했던 별점라이브러리를 해보았다.
별점을 가져와보니 스타일이 뭔가 많이 이상해서 어제도 뭔가 설정을 해주었는데, 알고보니 그부분이 라이브러리 자체의 css이니,
앞으로도 혹시나 라이브러리가 가져와지기는 했지만 뭔가 이상하다 싶으면, 해당라이브러리의 css를 확인해봐야한다는것을 알았다.
gettin-started 또는 소개부분에서 볼 수 있다.
여기서도 onChange등이 나오는데 흔히 알고 사용했던 그런 속성은 아니다. 따라서 이벤트 핸들러 함수에 속하지 않고 해당 라이브러리를 만든곳에서 만든것이기에 차이가 있다.
export default function 함수명() {return()}
화살표함수로
-->const 함수명 = () => {return ()}
export default는 const 와 함께사용할 수 없어 저 함수를 export default해주겠다는 의미로
아래에export default 해당함수명;
이렇게 적으면 기존함수와 같아진다.
그다음 실습한것은 주소창이다.
모달을 배우면서 모달안에 주소를 넣어주었는데 주소는 doum에서 제공하는 라이브러리를 사용하는것 같다.
해당 라이브러리는 다운로드수가 엄청적은데, 이것이 우리나라만 사용하는것이라 이 경우에는 예외로 본다.
그 외에도 모달창을 숨겼다 보여주기, 또는 모달창을 삭제했다가 다시그려주는(리렌더링) 스테이트를 이용하는 방식을 배웠다
아직 개념을 잘 잡지못했으나, 둘 다 상황에따라 적절히 이용할 수 있어야한다.
또하나, prev(=prevState)를 사용해 setState를 임시 저장공간에 저장하는데 그 값을 불러와 적용하는 것을 해보았다.
기존에는 setState가 함수 안에 여러개 있어도, 함수가 끝날때까지는 실행되지 않으면서, 임시저장된값들이 하나가 추가될때 앞에것이 지워지면서 쌓여 결국 마지막값만 state에 담겨지는데,prev를 사용하면 쌓인것들이 합쳐져들어가기에 코드 단축을 위해 사용을했다.
음... 수업을 듣고 오늘의 과제를 풀었더니 적용하기는 수월했느나, 문제는 응용력이다...
과연 내 실력이 늘고있는것일까..?
일단 전진한다는 느낌으로 나아가고는 있지만 걱정되는 3주차다....
