error record : styled-compoenents

styled components를 통해 함수형 컴포넌트들을 배치하려고 하는데, input에 뭘 적을 때 마다 focus가 풀리더라.

 

focus() 함수 등 이런저런 방법을 사용해봤지만 소용이 없었고,

 

진짜 이유를 찾는데 오래 걸려 기록해 두기로 했다.

 

문제가 있는 코드는 다음과 같았다.

 

// ... 앞쪽 코드는 생략

export function Calculator() {
	const CalculateModule = styled.div`
            ...

            > input {
                ...
            }
	`
    
    // ...중략
    
    return (
    	<CalculateModule>
        	<input
            		onChange={handlerFunc}
            	/>
        </CalculateModule>
    )
}

 

문제는 styled-components를 이용해 만든 element 코드 블럭의 위치였다.

 

저게 함수형 컴포넌트 안에 있으니 문제가 발생했던 것 같다.

 

내가 input에 값을 입력 > state 변경 > 리랜더링 의 과정을 거치는데, 이 과정에서 CalculateModule이 포함되어 있으니 

 

이 컴포넌트도 같이 리랜더링이 되면서 focus가 풀렸던 것 같다.

 

그래서 다음과 같이 styled component로 만든 element 관련 코드를 함수형 컴포넌트 밖으로 빼주었더니 해결되었다.

 

// ... 앞쪽 코드는 생략

const CalculateModule = styled.div`
	...

	> input {
		...
	}
`


export function Calculator() {
    
    // ...중략
    
    return (
    	<CalculateModule>
        	<input
            		onChange={handlerFunc}
            	/>
        </CalculateModule>
    )
}

 

그나저나 찾아봤는데 잘 안나온다는 건 왠만해선 이런 바보짓은 안한다는 얘긴데.. 흠.. ㅠㅠ..