#back_to_basic 리액트를 다 안다!고 생각했던 나....반성하며 다시 처음부터!라는 마음으로 공부해보자 1. Functional Component Life Cycle with Hooks 2. SPA 동작 순서 References https://surviveasdev.tistory.com/entry/React-hook%EC%9D%B4-%EB%82%98%EC%98%A8-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B..
사용자 입력 form 만들기 사용자의 값을 총 3번 받을 예정이라, 반복해서 사용할 컴포넌트(InputAIMake)를 정의해준 뒤에 각각 props로 다른 값을 주었다. InputAIMake는 사용자의 입력을 받는 컴포넌트이기에, TextField를 사용하여 값을 받아주었다. 값이 바뀌면 자동으로 전역변수 역할을 하는 state를 업데이트해주어야하기때문에, onChange를 통해 값을 업데이트해주었다. 바뀐 값의 종류에 따라 다른 state를 업데이트해주어야하기 때문에, id에 따라 다르게 분기해주어 처리해주었다. useState를 통해 state를 업데이트해주었다. 사실 state의 경우 input의 객체로 testSize, maxTrial, epochs를 가지고 있어도 되지만, .....ㄱ...귀찮아..
로그인 여부에따라 state 지정하기 지난번 로그인을 통해 access-token을 만들어주었다. getCookie를 통해 쿠키가 없으면(undefined), 이동해야하는 path를 /admin/ai-choosing으로 쿠키가 있으면 /login-page로 이동시켜서 로그인하도록 한다. 링크를 타고 들어갈 수 있는 컴포넌트에게 state 전달 원래는 223이었던 코드를 226으로 바꾸었다. redirect 해야하는 path를 위에서 지정해준 path로 값을 주었다. 결과 로그인이 안되어있을 때는(쿠키가 없을 때) admin/이 포함되는 링크로 가려하면 바로 login-page로 향한다.