본문으로 건너뛰기

I

풋살​

오랜만에 친구들이랑 풋살하기로 해서 축구 알고리즘에 빠졌다. 두근두근

운전연습​

잠실고에서 운전연습을 했다. 3년만에 잡아본 핸들...
주차 야무지게 연습했으니깐 다음주엔 도로주행!

Study

생각 그만 들이받기

리액트​

유효성 체크​

button, input등에 onChange, onClick을 사용한다. form에는 onSubmit을 사용해 핸들러를 만든다.

useState​

const[a,setA]=useState(초기값);

trim​

변수의 빈칸을 없애겠다.

유효성 검사​

'',/정규표현식/.test()등을 사용해 검사

동적 css할당​

유효성 검사를 실패했을 떄 입력창 역시 실패했음을 알려주기 위한 동적 css 할당 className={success ? "info" : "info error"

컴포넌트 전환​

if문은 {}속에서 쓰지 못하므로, !,&& 혹은 삼항연산자를 활용한 전환

질문​

Q. 아이디, 비밀번호를 올바르게 입력했는지 확인하기 위해 isIdValid, isPwValid state를 만들고, 초기값을 false로 세팅한다. 이후 올바른 입력이 들어오면 true로 전환해 다음 화면을 보여주고자 했다. 하지만 naive하게 구현해보면, 각 state의 현재값이 아니라 과거값을 참조해 에러가 일어나는 듯 하다. 어떻게 해결할까?
A. 컴포넌트가 실행될 때 state의 변경(set*)은 스택에 담아두고 모든 컴포넌트의 함수가 실행되고 이후에 처리되기 때문에, 함수에서 비교하는 값은 이전 값이다. 따라서 그냥 값 자체를 비교하는 방식으로 변경해본다. 혹은 중간에 return을 활용해 조건에 부합하지 못하면 끝까지 가지 못하게 만든다.

Q. 컴포넌트 간 합성에서 중복이 일어난다. 이를테면 <Button>을 사용자화 시키려는데 버튼 내부에서도 className이 선언되고 버튼컴포넌트를 사용하는 외부컴포넌트에서도 className을 사용해 충돌이 발생하면 어떻게 해결할까?
A. 백틱을 사용해 동적으로 할당한다.

문제해결은 다음시간에..