[React] 함수 호출하는 방법

함수 a가 있을 때,

1. a();

2. a.apply();

3. a.call();

4. a.bind();

5. a``;

태그드 템플릿 리터럴 tagged  template literal

a`${()=> ``}`

export const SendButton = styled.button`
  position: absolute;
  right: 5px;
  top: 5px;
`;

SendButton은 styled.button 함수에서 ``안에 값들을 인자로 받아서 실행하는 구문

 

export const EachMention = styled.button<{ focus: boolean }>`
  padding: 4px 20px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  color: rgb(28, 29, 28);
  width: 100%;
  & img {
    margin-right: 5px;
  }
  ${({ focus }) =>
    focus &&
    `
    background: #1264a3;
    color: white;
  `};
`;

a`${()=> `${()=> ``}`}`

EachMention은 styled.button 함수에서 props로 focus를 받아서 ``안에서 focus를 인자로 다시 받아 함수를 실행하는 구문

props를 받아서 조건부로 렌더링할 수 있다