내일배움캠프 65일차 TIL - 리액트로 프론트 구현하기

npx create-react-app [앱이름]

npm start

• /public : 리소스 파일(이미지 등)
• /src : JS 파일
• package.json, node_modules : 패키지 등

만약 설치 및 세팅 후 명령어 입력 시 

bash command not found 에러면 보통 환경변수 설정해주면 해결됨

* 리액트의 장점 

1. 직관적
2. 강력한 타입 검사
3. 컴포넌트 기반 접근 - > 재사용성과 유지보수성 향상
4. 다양한 라이브러리 제공 - 아이콘 같은 것도 import 해서 쓸 수 있음
5. 훅

React에서 중요한 파일 3가지

1. index.js
   src/index.js - 메인 / HTML, JavaScript의 컴포넌트를 렌더링. 'root'에 App.js를 렌더링 시킴 
2. App.js
   src/App.js - 컴포넌트 등을 정의함 실제로 사용자가 보게 되는 내용들은 다 여기에서 정의
3. index.html
   public/index.html. 메인 index.js에 대응되는 것으로, index.js에 의해 렌더링된 결과가 표시된다. (index.html 이름을 바꿀 시 오류 발생)

 

리액트에서 흥미로운 점 useState와 useEffect 사용

 const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    const payload = localStorage.getItem('payload');
    if (payload) {
      const payloadObject = JSON.parse(payload);
      console.log(payloadObject.is_admin);
      setIsAdmin(payloadObject.is_admin);
    }
  }, []);

위 코드 기준으로 설명하자면 
1. [isAdmin, setIsAdmin] = [현재 사용자의 관리자여부 상태 값, isAdmin 값을 변경하는 함수] = useState(초기값)
라고 생각하면 됨 

만약 상태 값이 변경되면 컴포넌트가 리렌더링된다.
2. useEffect 훅
위 구문은 마지막 줄에있는 의존성 배열인[]부분이 비어있기 때문에 컴포넌트가 처음 렌더링될 때 실행되고 이후 다시 실행되지 않음 

=> 이전 렌더링과 현재 렌더링 사이 해당 상태 값이 변경된 경우에만 useEffect 콜백 함수가 다시 실행됨 

이것들을 이용해서 백엔드랑 통신할 수 있음~