리액트 입력 칸

프로젝트를 진행하다가 문득 input 태그와 textarea 태그의 차이점이 궁금해졌다.

둘의 차이는 간단하게도 받을 수 있는 줄의 차이였다.
input 태그의 text는 단순히 한 줄 밖에 입력을 받을 수 없지만, textarea는 여러 줄의 멀티라인 텍스트를 받을 수 있다는 차이점이 있었다.


또한 input이나 textarea를 클릭 했을 시에 테두리 outline이 검정색으로 변하는 상황이 생겼다.
나는 주로 styled-components를 사용하여 컴포넌트를 만들어 사용하는데, 내가 만든 컴포넌트 아래에

&:focus {
	outline: none;
    border: 2px solid #595959;
}

이런식으로 사용하면 된다.

다음으로는 placeholder 색상을 바꾸는 방법이 궁금해졌다.
placeholder는 컴포넌트 아래에

&::placeholder {
	color: red;
}

이런식으로 사용하면 된다.