[TIL] 23.04.15.

오늘의 학습 내용

• 리액트 입문 강의 수강
• 리액트 관련 개념 공부
• 간단한 로그인 페이지 실습
• 리액트로 간단한 TODO 서비스 구현

새로운 배움

• 리액트 개념 (jsx, props, state)
• JSX 문법
• hook은 비동기로 동작한다!
• 협업을 위한 확장자 .jsx

문제 상황과 시도, 해결

• 실제로 배운 개념과 내용들을 바탕으로 우선 로그인 페이지를 실습하였다. Input 태그를 두개 만들고 하나는 타입을 text, 하나는 password로 두었다. 또 label 태그를 두어서 input 태그의 아이디와 for 속성으로 연결하였다.이렇게 코드를 작성하니 총 두개의 오류가 발생했다. 코드는 정상적으로 실행되는데 브라우저 콘솔에 에러가 발생했다. 에러의 내용이 찝찝해서 검색하니 하나는 password로 인풋 태그의 타입을 지정해줄 경우 input태그 자동 완성 기능을 off할 것을 권장하는 내용이었고 하나는 jsx에서 for은 사용 못한다는 것이었다. for을 forhtml로 변경하니 문제가 없어졌다.

<!-- 생략 -->
<label for="iptId">ID:</label><input id="iptId" type="text"></input>
<label for="iptPw">PW:</label><input id="iptPw" type="password"></input>
<!-- 생략 -->

- 콘솔로그가 두번 찍힌다! 리액트 StrictMode

- 리액트로 작은 실습들을 하면서 콘솔을 찍어보는데 같은 콘솔로그가 2개씩 찍이는 것.. 뭐가 문제지..? 하면서 폭풍 검색을 하다가..

이 게시글을 발견하였다. 역시 구글링이 최고인 것 같다.
인프런 질문글

index.js의 <App>태그를 감싸고 있는<StrictMode>태그를 지우면 해결 된다고 한다. 일종의 리액트 검사도구로 CRA로 리액트 앱을 생성하면 기본적으로 설정되는 모드라고 한다. 랜더를 두번씩 하게 되기 때문에 콘솔이 두번 찍히는것!

느낀점

처음에 가졌던 궁금한 점들이나 이런것들을 개념을 더 확장시켜갈수록 해소가 되어서 다행이다 싶으면서도 또 새로운 개념을 계속 접해서 모르는것도 동시에 많아진다…

관련 작성글

[리액트] JSX란? JSX문법 소개

[리액트] Props란, Props Drilling(칸트의 도덕철학)

[리액트] State