김재욱의 이모저모

넷플릭스 클론코딩의 첫 단계로 로그인 페이지를 구현하였다. 이번 클론코딩을 처음으로 진행하면서 알 수 있었던 사실은 HTML에도 많은 기능이 있고, 그걸 모르면서 코딩을 한 나는 정말 아무것도 모르고 코드를 쓰고 있었음을 알 수 있었다... ㅠ_ㅠ 내가 이번에 클론코딩을 진행하면서 새롭게 알고, 배운 사실들을 여기에 기록하면서 한 단계씩 진행해볼까 한다. useState 를 통한 상태관리 로그인 화면 회원가입 화면 위의 두 화면은 하단의 흰색 글씨를 누르면 서로의 화면으로 바뀌어야 했다. 물론 서로 다른 화면으로 분리해서 만든 후 링크를 걸어도 됐지만 디자인도 같은데 굳이 넘어다니는데 사용자가 더 긴 시간을 허비하게 할 필요가 없다고 생각하였다. (만약 보안상의 다른 문제나 따로 고려해야 할 것이 있다면..

useState란? 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. const [state, setState] = useState(초기값); useState 함수의 기본 꼴이다. state라는 변수를 선언하고 그 값은 useState 괄호 안의 값을 초기값으로 초기화 된다. 그리고 setState함수를 통해서 해당 값을 바꾸고, setState함수를 통해 state가 바뀌게 된다면 해당 컴포넌트가 다시 랜더링 된다. useState를 왜 사용하는가?! 이 아이콘의 배경색은 지금의 색깔이 defalut 값이지만 클릭을 하게 된다면 배경색이 변하게 될 것이다. 저 아이콘의 코드는 아래와 같다. //CircleIconChip.tsx 아이콘의 전반적인 기능을 관리하는 코드이다 import..