처음 리액트 환경을 설정할 때나 SPA환경을 구축할 때 권장하는 도구프로젝트를 시작하고자 하는 폴더에 있는지 확인한 후 npx create-react-app 프로젝트명 명령어를 통해 리엑트 프로젝트를 설치한다.생성된 프로젝트명 폴더로 이동해 npm start 명령어를
페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리원하는 결과를 선언DOM조작은 React에게 전적으로 위임리액트가 Ui를 자동으로 업데이트하기 위한 방법가상 돔을 통해 dom 조작을 계산한 뒤, 한번에 dom을 조작브라우저가
다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.리액트는 프레임워크가 아닌 라이브러리이므로 라우팅을 하기 위해서는 npm react-router-dom 명령어로 필요한 라이브러리를 다운받아야 한다./src/index.js에서 렌더링을 할때
1. Link 컴포넌트란? 라우팅 기능을 구현할 수 있는 컴포넌트 > - to : 이동할 컴포넌트 경로 💡 `와 ` 태그의 차이는? > - `` : 실제 서버에 요청을 보내지않고 url만 변경 `` : 페이지 이동 시 서버로부터 매본 새로운 페이지를 요청해서 받
1. hook(훅)이란? 2. hook - useNavigate
1. props란? 컴포넌트의 속성값 -> 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능
컴포넌트 내부에서 컴포넌트의 상태값 -> 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값useState()를 사용해서 state를 관리한다.첫번째 요소 : 동적으로 관리하고자 하는 상태값두번째 요소 : 상태값을 업데이트하는 함수useState()
React에서 side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 hookuseEffect(콜백 함수, 의존성 배열)콜백함수 : 특정한 side effect를 수행의존성 배열 : 렌더링 시 useEffect를 실행할 조건의존성 배열이 전달되지 않았으므로
코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 컴포넌트 분리를 적용view와 로직을 분리state에 따라서 분리