최근 학습한 내용의 복습과 향후 참조할 레퍼런스 용도로 제작된 내용입니다. 내용에 실수가 있거나 오탈자가 발견되실 경우, 상단의 컨텍폼을 통해 연락주시면 감사하겠습니다.
위와 같은 컨텍폼을 작성했다고 가정합니다. (하단 폼소스-1)
<form onSubmit={formSubmitHandler}>
<div>
<label>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler} />
</div>
<Button type="submit">Add Goal</Button>
</form>사용자가 입력창에 값을 입력하고 버튼을 누르면, 하단에 해당 내용이 표시되는 간단한 예제입니다. 이때, 사용자가 빈값으로 버튼을 누르면, 입력창이 빨간색으로 변하게됩니다.
<form onSubmit={formSubmitHandler}>
<div className={`form-control ${!isValid ? "invalid" : ""}`}>
<label>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler} />
</div>
<Button type="submit">Add Goal</Button>
</form>여기서, css 코드 내용을 보면 두개의 코드로 만들어집니다.
클래스명에 3항연산자를 사용하여, 특정변수의 값(isValid)이 참/거짓인지를 참조하여 판별식을 적용. 판별식으로 활용된 변수가 참이면 빈값, 즉, 정상상태이므로, 아래의 값이 실행될 것입니다.
정상적인 입력인 경우, 아래의 값이 실행될 것이다.
.form-control input {
display: block;
width: 100%;
border: 1px solid #ccc;
font: inherit;
line-height: 1.5rem;
padding: 0 0.25rem;
}
.form-control label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
클래스이름에 invalid가 붙으면 아래 css가 적용.
.form-control.invalid input {
border-color: red;
background: #ffd7d7;
}
.form-control.invalid label {
color: red;
}또 하나 재미있는 점은, 사용자가 입력창에 값을 입력하기 시작했을때, 입력창의 색이 검정색으로 바뀐다는 점입니다.
여기서 주의깊게 볼 내용은, if문이나 다른 조건문을 사용하지 않고 3항연산자를 통해 코드를 간략하게 표현했다는 점.
<div className={`form-control ${!isValid ? "invalid" : ""}`}>본 소스의 예제는 udemy 강의를 통해 react 수업을 진행하던 중에 발췌한 소스이므로,
전체 소스 공개는 불가하지만, 궁금하신 내용이 있으신 분은 언제든 댓글을 주시면 함께 문제를
풀어갈 수 있을것 같습니다.
본 내용은 udemy > React 강의 > 섹션:6 Styling React Components를 통해 더 자세한 내용을 확인 할 수 있습니다.
CSS 파일의 내용을 코드단에 함께 구현하는 방법은 내용이 좀더 이해된 후에 작성하도록 하겠습니다.
다들 오늘도 즐코딩 하세요!!!
