해당 프로젝트에서는 input type이 date인 경우에 원하는 placeholder가 나타날 수 있도록 해야했다. 즉, placeholder를 커스텀해야 한다는 것이다.
근데, text처럼 placeholder를 추가한다고 간단하게 해결되는 것이 아니었다..
placeholder 커스텀 (before를 활용)
::before에 content 속성을 사용하여 date-placeholder라는 속성을 만들어준다.
그리고 해당 태그(.md-date-input)가 focus되거나 valid될 때, placeholder를 안보이도록 display: none을 해주면 된다.
input 태그 안에 date-placeholder 속성으로 원하는 값을 넣어주면 된다.
이때, input 태그에 꼭!!!! required를 작성해주자. 해당 속성이 있어야 값을 입력했을 때 placeholder가 안보이게 된다.
webkit으로 placeholder 없애기
이거는 placeholder 커스텀하는 방법을 찾다가 발견한 것인데, 나중에 쓸 수 있으므로 같이 적어둔다.
webkit을 dateTime과 calender를 수정할 수 있다.
상세 내용은 참고란을 확인하자.
참고
CSS:input type=date, placeholder 적용
input date placeholder 없애기, value색 변경
svg 파일은 css를 작성해도 변하지 않는다. 따라서 svg 파일 코드에서 스타일을 변경하던가 해야하는데, 이상하게 이게 적용이 잘 안됐다. 그리고 해당 파일을 어떤 페이지에서 사용하느냐에 따라 색상이나 사이즈가 달라져서 svg 파일에서 변경하는 것은 좋은 방법은 아니었다.
따라서, 나는 ReactComponent를 활용하여 변경하였다.
ReactComponent로 svg 이미지 스타일 변경하기
해당 방법은 svg 파일을 컴포넌트와 시켜주는 것이다.
파일을 컴포넌트로 만들어줬기 때문에 우리가 평소에 사용하던대로 스타일을 적용하면 된다.
import ReactComponent as 원하는 컴포넌트 이름 from '이미지 파일 url'를 통해 svg 파일을 컴포넌트로 만들어 준다.
컴포넌트 만들어줬으니 사용하는 것도 컴포넌트처럼 사용하면 된다.
나는 scss에서 스타일을 변경시켜주려고 컴포넌트에 class를 부여해줬다.
scss에서 path 태그에 fill을 원하는 색상으로 설정해주면 해당 색상으로 svg 이미지의 색상이 변경된다.
svg 파일의 코드를 보면 색상이 path 태그의 style에 들어가 있는 것을 알 수 있다.
참고
개발일기_220106_svg 리액트 컴포넌트로 사용하기(svg 색상 바꾸기)
textarea나 input 태그를 focus 할때, border의 색상을 변경하기 위해서 :focus를 사용해서 border의 색상을 변경하게 어쩌구 저쩌구.. 이런식으로 코드를 작성했었다.
근데, 단 한 줄로 해당 기능을 구현할 수 있는 방법을 찾았다.
outline-color
border의 색상을 변경하고 싶은 박스에 일단 border 속성과 색상을 지정해준다. 그리고 outline-color 속성에 focus시 변경하고 싶은 색상을 넣어주면 끝이다.
참고
textarea focus 될 때, border 색상 변경
프로젝트를 진행하면서 radio를 3개를 사용하는데, 3개중 하나를 기본값으로 입력되도록 설정하고 싶었다. 해당 페이지는 입력했던 값을 수정하는 페이지였기 때문에, 글을 작성했을 때 선택했던 radio의 값이 해당 페이지(수정 페이지)에서 자동으로 선택되어있어야 했다.
해당 기능은 checked 속성만 추가하면 될 줄 알았는데..ㅎ 그건 아니었고.. defaultChecked라는 속성을 추가해야 했다.
defaultChecked 속성 사용
나는 총 3가지의 radio중 하나만 선택되도록 할 것이다.
3가지의 값은 성별무관(0), 남자만(1), 여자만(2)이다.
useState를 사용하여 limitGender를 만들어주는데 기본값으로 아무것도 넣어주지 않는다. 백엔드에서 값을 받기 때문이다. (만약, 넘겨받는 값이 없다면 그냥 원하는 값으로 기본값을 넣어주면 된다.)
각 radio 값마다 부여해준 값(0,1,2)으로 변경하기 위해서 함수를 총 3개를 만들어주었다. (지금 생각해보면 이럴 필요 없이 하나로 하면 됐을 듯 하다.)
onClick 이벤트를 통해서 해당 input 부분이 클릭되면 선택한 값(0,1,2)으로 limitGender이 변경된다.
그리고 각 radio 태그마다 삼항연산자를 사용하여 defaultChecked를 부여해줬다. 값이 0이라면 0 radio 부분에 limitGender === 0 의 조건이 성립하므로 defaultChecked가 true가 된다.
이때, 다른 radio들은 조건이 성립하지 않으므로 빈 중괄호만 들어간다. (즉, defaultChecked 속성이 들어가지 않는다는 것)
참고
React input radio default checked 설정(리액트 radio 기본값)
input 태그에 value 속성을 추가하면 값이 입력되지 않는 에러가 발생했다. 해당 에러는 React에서만 발생하는 것 같다.
value 속성만이 값을 컨트롤할 수 있는 권한이 존재하기 때문에 사용자가 값을 변경할 수 없다. 따라서 onChange를 사용하여 값이 변경되도록 한다.
onChange를 사용하여 에러 해결
값이 변경되는 것을 반영하기 위해서 useState를 사용한다.
값이 변경될 수 있도록 handelMeetingTime이라는 함수를 만들어 준다. 해당 함수가 실행되면 setMeetingTime으로 meetingTime의 값이 변경된다.
이때, 변경될 값은 e.target.value이다. 현재 타겟팅 되어있는 값으로 변경하는 것이다.
onChange 이벤트를 사용하여 변화가 감지되면 handleMeetingTime 함수가 실행된다. 그리고 변경된 값이 input에 잘 나타나도록 value에 meetingTime을 넣어주면 된다.
참고
input 엘리먼트에 value 속성만 지정했을 때 값이 입력불가한 현상 해결방법