Front-end/React (14) 썸네일형 리스트형 Styled-component 정의 css-in-js 라이브러리:스타일 정의를 css 파일이 아닌 js로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 Tagged Template Literal Template Literal - ES6 문법 const name = 'react'; const message = `hello ${name}`; console.log(message); // "hello react" const object = { a: 1 }; const text = `${object}` console.log(text); // "[object Object]" const fn = () => true const msg = `${fn}`; console.log(msg); // "() => true" 함수 선언부를 그대로 리턴 const.. React Query 동기 react app은 데이터 비동기 서버 통신에 대한 구체적인 방법을 제공하지 않음 -> 데이터 통신을 위해 react hook 또는 상태관리 라이브러리를 사용함 상태관리 라이브러리는 클라이언트 상태 작업에만 최적화 되어있어 비동기 또는 서버 상태 작업에는 적합하지 않음 서버 상태를 관리하기 위한 라이브러리 사용하는 이유 store에서 클라이언트 데이터와 서버 데이터가 공존하여 혼론을 야기함 -> react-query를 통해 클라이언트 데이터와 서버 데이터를 분리함 -> 서버 데이터를 위한 store 내 로직이 과도하게 커지고 그로 인해 store를 사용하기 위한 보일러 플레이트가 비대해지기 때문 -> 서버응답을 store에서 관리가 필요 없는경우에도 구조화를 위해 불필요한 캐싱도 일어남 따라서, 관.. Redux 동기 항상 변할 수 있는 상태를 업데이트하는 위치와 주체가 다르기때문에 ->상태를 언제, 왜 어떻게 업데이트 할지 제어하기위해 react 에서는 뷰레이어에서 비동기와 DOM 조작을 없애버렸음 → react에서는 데이터를 관리하는일에 관여하지 않음 redux는 상태변화가 일어나는 시점에 제약을 두어 상태 변화를 예측 가능도록함 react의 context API 에서 useReducer를 사용하면 유사함 다만, useReducer 가 존재하기도 전에 만들어져서 글로벌 상태관리로 많이 사용됨 redux vs context API 미들웨어 redux에만 존재함 미들웨어를 사용하여 action 객체가 reducer에게 처리되기 전에 특정 작업 수행 가능 ex) 특정 조건에 따라 action 무시, action 출.. Hook 정의 hooking - 소프트웨어 구성요소간 발생하는 함수호출, 메시지, 이벤트 등을 중간에 바꾸거나 가로채는 명령, 행위 hook - 이때의 함수호출, 이벤트 또는 메시지를 처리하는 코드를 hook 이라고 함 React에서의 hook 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수 props, state, context, refs, lifecycle 과 같은 react 개념에 좀더 직관적인 API 를 제공 컴포넌트 사이에서 상태 로직을 재사용 하기 위함 독립적인 테스트가 가능 class 컴포넌트 안에서는 동작하지 않음 class 컴포넌트의 단점 this 키워드의 작동이해가 되지 않으면 혼란을 줄수있음 코드의 최소화를 힘들게 만듦 Hook 사용 규칙(linter pl.. Next.js Pages Pre-rendering default 가 모든 페이지를 pre-render(각각의 페이지들을 HTML로 생성)함 아래 두가지 형태가 있고 HTML 생성 시점에 따라 다름 각 페이지 마다 다른 pre-render 방식을 절정하여 hybrid 한 app 을 만들 수 있음 Static Generation build 시점에 HTML을 생성하고 각 request마다 재사용됨 “next build”시 생성 static generation with data 해당 페이지에 외부에서 받는 데이터가 있는경우 같은 파일 내에 async 함수인 ‘getStaticProps’ 를 같은 파일 내에서 export 시킴 export default function Blog({ posts }) { // Render post.. React core JSX 정의 javascript 를 확장한 문법 React element를 생성 컴파일이 끝나면 JSX표현식이 정규 javascript 객체(React element)로 인식됨 표현식 const name = 'Josh Perez'; const element = Hello, {name}; 속성 정의 속성에 문자열 정의 const element = link ; 속성에 javascript 표현식 삽입 const element = ; !! JSX는 javascript 에 가깝기 때문에 속성(ex-class)을 프로퍼티(ex-className)처럼 camelCase로 정의 주입 공격 방지 JSX에 삽입된 모든 값을 렌더링 하기전에 escape 처리함 XSS 공격 방지 가능 Element rendering 브라우저.. 이전 1 2 다음
