10.24.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(4)

[ 새롭게 알게된 것 ]

---

1. styled-component에서 태그안에 또 다른 태그가 들어간게 보인다면 놀라지말자 Nested CSS임

---

h3,  div, p  태그 같은 태그들은 styled-componet에선 굳이 아래처럼 따로 컴포넌트를 만들지 않아도

const Title = styled.h3``;

 Nested CSS 문법으로 styled.div ` ..(이하 생략) 안에 사용가능해요 마당~

(예전에 remon 한테 물어보셨던 내용이 이거랑 관련된거 같아서 코멘트 적어욥)

아래처럼 특정 스타일 적용 가능함

const DialogBlock = styled.div`
  h3 {}
  p {}
`;

---

 

 

2. 만약 컴포넌트를 잘 만들었는데 경로 에러 표시가 뜬다면, 해당 컴포넌트가 호출위치를 재 확인할것

---

이런에러가 보이면 보통 컴포넌트가 해달 레포 아래 있지 않은 경우가 많음

---

 

 

3.  컴포넌트의 스타일을 커스터마이징할땐 반드시 className props가 내부 요소에 전달되어야함

---

이걸 체크하기 위한 용도가 바로 아래 구조임

const MyComponent = ({ className }) => {
  return <div className={className}></div>
};

const ExtendedComponent = styled(MyComponent)`
  background: black;
`;

---

 

4. styled-component에서 CSS Keyframe을 사용시 keyframes라는 유틸을 활용해 트랜지션 효과줌

---

요론식으로 애니메이션 이름은 커스터마이징 가능함

import styled, { keyframes } from 'styled-components';
import Button from './Button';

const fadeIn = keyframes`
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
`;

---

 

5. 트랜지션 사라지는 효과는 컴포넌트에서 두개의 로컬 상태를 관리해주어야됨

---

로컬상태 두개중 한개는 현재 트랜지션 효과를 보여주고 있는 상태를 의미하는 animate와

const [animate, setAnimate] = useState(false);
const [localVisible, setLocalVisible] = useState(visible);

다른 하나는 실제로 컴포넌트가 사라지는 시점을 지연시키기 위한 localVisible 값임

그리고 useEffect를 하나 작성해서 visible 값이 true->false 되는것을 감지 시키면 됨

 useEffect(() => {
    // visible 값이 true -> false 가 되는 것을 감지
    if (localVisible && !visible) {
      setAnimate(true);
      setTimeout(() => setAnimate(false), 250);
    }
    setLocalVisible(visible);
  }, [localVisible, visible]);

  if (!animate && !localVisible) return null;
  return( ...생략); 
  
  }

리턴할때 각 컴포넌트의 disapper값은 !visible로 초기화 시켜줌. 이것도 책 참조하면 좋음.

---