2024.02.01 TIL

팬레터 사이트 트러블슈팅

1. styledComponent, props 오류

styled components에서 props를 통해 스타일을 제어하는 부분에서 오류가 나고있었다.

1.' React에서 "알 수 없는 속성이 DOM 요소로 전달되고 있습니다'

코드를 살펴보니 이러한 오류가 나는 props들은 스타일드 컴포넌트에서만 사용되는 props였다. 다른 컴포넌트로 해당 props를 전달하지 않고, 해당 스타일 규칙이 현재 컴포넌트의 스타일 범위 내에 있다면 해당 props는 스타일드 컴포넌트에서만 사용되는 것으로 간주된다. 그러나 DOM은 이를 알지 못하고 속성(attribute)으로 인식하게 되어 경고가 발생하는 것이다.

해결 방법은 transient props(일시적인 props)를 사용하는 것이다. transient props는 props 변수명 앞에 $ 표시가 붙은 것으로, 이러한 props는 렌더링 중에 무시된다.

정리하면 $selectedCharacter와 같이 $를 붙여 styled-components에서만 사용되는 props임을 명시하면 된다.

 

2. input, textarea의 value와 defaultValue 속성

수정 기능을 구현하기 위해 textarea 컴포넌트에 서버에서 로드한 내용(item.content)을 표시하기 위해 value 속성에 를 할당했을 때, 수정 내역이 입력 되지 않는 문제가 발생했다.

해결방법은 value 대신 defaultValue 속성에 item.content를 할당하여 문제를 해결했다.

value는 input 요소의 현재 값을 나타낸다. value를 사용하면 react가 할당되었던 value값을 계속해서 보여주기 때문에 수정이 되지 않는 문제가 발생하는 것이다. defaultValue 속성은 초기 렌더링 시에만 적용되기 때문에, 수정 버튼을 누른 이후에는 defaultValue가 더 이상 적용되지 않고 내용을 수정할 수 있다.

정리하면 defaultValue를 지정해주고 input 창에 입력을 하게되면 값이 수정되지만, value를 지정해주고 input 창에 입력하게되면 입력이 되지않고 지정해준 value 값만 보여주게 된다.

<LetterContentTextArea 
$isModifying={isModifying} 
defaultValue={item.content} 
onChange={handleContentChange} 
ref={contentArea} spellCheck={false} maxLength={200} readOnly={!isModifying}>
</LetterContentTextArea>

 

---

CSS

모든 변경을  smooth하게 변경하기

    transition: all 0.3s; 
    /* 모든 변경을 0.3초동안 진행해라 */