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가지
- index.js
src/index.js - 메인 / HTML, JavaScript의 컴포넌트를 렌더링. 'root'에 App.js를 렌더링 시킴 - App.js
src/App.js - 컴포넌트 등을 정의함 실제로 사용자가 보게 되는 내용들은 다 여기에서 정의 - 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 콜백 함수가 다시 실행됨
이것들을 이용해서 백엔드랑 통신할 수 있음~
'내일배움캠프 > 내일배움캠프 TIL' 카테고리의 다른 글
내일배움캠프 TIL 67일차 - 테스트코드 다중이미지 업로드 (2) | 2023.06.13 |
---|---|
내일배움캠프 66일차 TIL - DRF 설정 및 권한 오류 (0) | 2023.06.13 |
내일배움캠프 64일차 TIL - 카카오 로그인.. (0) | 2023.06.11 |
내일배움캠프 63일차 TIL - 테스트코드 에러 (0) | 2023.06.11 |
내일배움캠프 TIL 62일차 - 파이널 프로젝트 EcoCanvas S.A (2/2) (1) | 2023.06.07 |