반응형 분류 전체보기266 SPA & 라우팅 기본개념 Single Page Application 이란? - 서버에서 주는 html이 1개 뿐인 어플리케이션. - 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. - 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. - 사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있다. - 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다. → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문. 단점 - 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. - 한 .. 2021. 9. 2. React Event Listener React Event Listener - 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. - 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다. - 리액트는 컴포넌트가 실행되고 제거되기 때문에 리스너 또한 제거되기 전 반드시 해제해 주어야 한다. - 아래의 페이지에서 이벤트 리스너의 종류를 참고하자. 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 예시 - 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있다. - 이곳에서는.. 2021. 9. 2. State 관리 - 함수형 컴포턴트 (useState, React Hooks) React Hooks - 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있다. 1. Nemo.js 생성 import React from "react"; const Nemo = (props) => { // 반환할 리액트 요소가 없을 때는 null을 넘겨준다. // 처음 껍데기 잡으실때도 null을 사용 return null; } export default Nemo; 2. App에서 Nemo.js 불러오기 import React from "react"; import Nemo from "./Nemo.js" class App extends React.Component { constructor(props) { super(props); }; componentDidMoun.. 2021. 9. 1. State 관리 - 클래스형 컴포넌트 (setState) 단방향 데이터 흐름의 중요성 - 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다. - 라이프 사이클과 연관지어 생각해보면, 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. - 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해보자. - 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되면서, 또 다시 자식 컴포넌트가 리렌더링 된다. - 무한루프에 빠지게 된다. 클래스형 컴포넌트에서 state 관리 - setState() 사용 - 아래 네모 예제를 통해 관리하는법을 보자. Count 숫자만큼 네모칸을 화면에 띄우기 1. state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기 impo.. 2021. 9. 1. 리액트에서 돔요소를 가져오기 React.createRef() - 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야하나? - 리액트 요소에서 가져온다. class App extends React.Component { constructor(props) { super(props); // App 컴포넌트의 state를 정의해줍니다. this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; // ref는 이렇게 선언합니다! this.text = React.createRef(); } componentDidMount(){ // 콘솔에서 확인해보자! console.log(this.text); console.log(this.text.current); } // 랜더 함수 안에 리액트 엘리먼트를 넣어.. 2021. 9. 1. React - 라이프사이클 & 라이프사이클 함수 라이프사이클 - 컴포넌트의 라이프 사이클은 정말 중요한 개념이다. - 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 생성 → 수정(업데이트) → 제거 생성은 처음으로 컴포넌트를 불러오는 단계 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 또는, 강제로 업데이트 했을 경우 (forceUpdate()를 통해 강제로 컴포넌트.. 2021. 9. 1. 이전 1 ··· 5 6 7 8 9 10 11 ··· 45 다음 반응형
