public 파일에서 이미지 가져오기 App.js의 상대 경로 X index.html의 상대 경로 O getTime()메서드 : 밀리초 반환 헤더, 버튼 등 공통적으로 많이 사용되는 부분 => 공용 컴포넌트로 제작 버튼 예시 // 버튼 모아놓은 component(MyButton) // type, text, onClick => props const MyButton = ({type, text, onClick}) => { return ( // onClick: 이벤트 {onClick}: props {text} ) }; export default MyButton; // App component import MyButton from ___; const onClick01 = (e) => { console.log('클..

Routing - 라우트 : 데이터가 이동하는 경로 - 라우터 : 데이터가 이동하는 네트워크 장치 - 라우팅 : 데이터가 어디로 이동해야 할 지 경로를 정해주는 전체 과정 * @6 : 버전 => 참고자료 검색 시 라우터 버전 일치하는 지 확인해야 함 package.json에서 버전 확인 가능 설치 방법 : npm install react-router-dom@6 router 사용 시 주의 1. 페이지 변경 시에도 항상 노출되어야 하는 영역의 경우 Routes영역 바깥에 작성 2. 페이지 이동 위해 a태그 사용 가능함 하지만 a태그 클릭 시 문서 전체가 새로고침 됨 => SPA 장점 활용 X 그래서 라우터 사용한 페이지 전환은 a태그 사용 X

App컴포넌트 새로고침 or 업데이트 시 자식 컴포넌트도 똑같이 실행됨 => 불필요한 연산 발생 rendering : 코드를 화면에 그려주는 과정 => 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것 rerendering : 리액트에선 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행 내부 상태(state) 변경시 부모에게 전달받은 값(props) 변경시 중앙 상태값(Context value 혹은 redux store) 변경시 부모 컴포넌트가 리렌더링 되는 경우 출처 : https://narup.tistory.com/272 mount / unmount : 화면에 데이터가 나타나는 것 컴포넌트..

1. 상태변수를 객체로 묶어 저장 // state, setState => 객체 const [state, setState] = useState({ // 프로퍼티 title : '', content : '', emotion : 5 }); 2. setState함수 담은 함수 생성(even연결 시 호출 할 함수 생성) => setState함수 event결과로 바로 호출 X event연결 시 호출할 함수 만들 때 하나의 함수 사용해 객체 유형으로 저장된 state변수 각각에 접근해야 하므로 태그를 구분할 수 있도록 name속성 추가하기 name속성값은 state변수의 프로퍼티 이름과 일치시켜 대상에 접근하도록 const changeState = (e) => { // setState함수 호출하기 // 프로퍼티 각각..