8_19, 8_20, 8_21 메모

밑줄 애니메이션

const Div = styled.div`

  color: #484848;

  font-size: 14px;

  position: relative;

  display: inline-block;

  text-decoration: none;

  padding-bottom: 10px;

  &::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0; /* 글자 아래쪽에 위치 */

    width: 100%;

    height: 3px; /* 밑줄 두께 */

    background: #23d2e2;

    transform: translateY(8px) scaleY(0); /* 처음엔 보이지 않음 (세로축 0) */

    transform-origin: bottom; /* 밑에서 시작 */

    transition: transform 0.4s ease;

  }

  &:hover {

    font-size: 15.5px;

    font-weight: 500;

  }

  &:hover::after {

    transform: translateY(0) scaleY(1); /* 밑줄만 hover 시 채워짐 */

  }

 

 

 

서버 컴포넌트와 클라이언트 컴포넌트에서 받아온 배열 값 비교

서버 컴포넌트

- 받아온 배열을 그대로 참조로 넘어가는게 아니라

- JSON 직렬화 - 역직렬화 과정을 거쳐서 새로운 배열로 전달

- 따라서 같은 내용이지만 메모리가 달라서 비교시 같은값이 아니다

클라이언트 컴포넌트

- JS 파일 안에서 그대로 넘어감

- 비교시 같은 배열이다

 

 

줄 넘길 시 말 줄임표로 만들기

overflow : hidden;

display : -webkit-box; // 웹킷

-webkit-line-clamp : 2; // 줄 제한 수

-webkit-box-orient:vertical // 줄 방향

 

 

css 줄바꿈 표시

-  white-space: pre-line;

 = \n만 인식한다.

 = \n 만나면 자동 줄바꿈

 

 

 

React에서 이벤트 핸들러를 넘길 때 두 가지 방식

1. 그냥 함수 이름만 넘기는 경우

<button onClick={handleButton}>입력</button>

= 함수에 넘겨줄 인자가 없는경우

=  내부적으로 handleButton(event)가 호출됨

 

2. 화살표함수로 감싸는 경우

<button onClick={() => handleButton(content)}>입력</button>

= 함수에 넘겨줄 인자가 있는 경우

= 이 경우 이벤트 객체는 전달되지 않음 (필요하면 onClick={(e) => handleButton(e, content)}처럼 직접 넘겨야 함)