본문 바로가기

내마음대로만들어보자326

[복습]React 주요 개념정리 - 라우팅 1. SPA 란? Single Page Application : 서버에 주는 html 이 하나라는 뜻! 일반적인 웹사이트는 페이지를 이동할때마다 정적자원을 받아오지만 SPA는 정적자원을 한번만 받아온다. 2. 라우팅 이란? 브라우저 창 주소에 따라 다른 페이지를 보여주는걸 라우팅 이라고한다. 3. 리액트에서 라우팅 처리하기 1) 패키지 설치하기 yarn add react-router-dom 참고 공식문서 https://reactrouter.com/web/guides/primary-components React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 2) 페이지 전환하기 - index.js에 Brows.. 2021. 9. 23.
[복습]React 주요 개념정리 - Event Listener 이벤트 리스너는 사용자가 어떤 행동을 하는지 지켜보다가 알려주는 것이다. 주로 마우스 클릭, 오버, 키보드 누름 등에 자주 쓰인다. * 참고자료 https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org addEventListener 를 통해 이벤트 리스너를 추가해보자. 1. 클래스형 컴포넌트에서 event lisntener 구독하기 이벤트 리스너는 어떤 이벤트 행동을 지켜보려면 DOM요소가 있어야하므로 componentDi.. 2021. 9. 22.
[복습]React 주요 개념정리 - 함수형컴포넌트 useState() 함수형 컴포넌트에는 state가 없지만 react hook을 통해 state를 가질 수 있다. 1. useState() 로 state 등록 // count에는 state 값이 , setCount는 count라는 state값을 수정하는 함수 // useState( ): () 안에 초기값을 넣어준다. const [count, setCount] = React.useState(3); 2. 예제코드 useState()를 통해 state를 가지고 초기값을 설정해주었다! 하나 추가 버튼을 클릭을 하게되면 addNemo 함수가 실행이 되어 setCount(count+1)을 해주는걸 볼 수 있다. setCount는 count라는 state값을 수정해주는 함수로 정의되어 있다. 하나 빼기 버튼도 마찬가지 원리! 다만, .. 2021. 9. 22.
[복습]React 주요 개념정리 - 라이프사이클 1. 가상돔이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델인데, div태그라는 객체는 텍스트 노드, 자식노드 등등 하위 어떤값들을 가지고 있기때문에 DOM은 트리구조라고한다. DOM 트리 중 하나가 수정될때 필요없는 연산을 없애기 위해 나온게 가상돔이다. * 가상돔의 동작방식 1) 기존 DOM에서 어떤 동작을 수행한다. 2) 새로 그린 DOM과 비교를 한다.(가상돔에 올라갔다고 표현) 3) 바뀐부분만 갈아끼워준다. DOM이 새로그려지는 상황은 처음 페이지 진입했을때, 데이터가 변했을때 다. 2. 라이프 사이클이란? 컴포넌트가 렌더링을 준비한 순간부터 페이지에서 사라질때까지가 라이프 사이클이다. 참고 공식문서 https://ko.reactjs.org/docs/state-and-lifecycl.. 2021. 9. 22.

티스토리툴바