Web Front-End/React (26) 썸네일형 리스트형 React SPA(Single Page Application) 1. SPA란? SPA가 아닌 기존 웹은 페이지 이동이 일어날때 마다 서버단으로부터 새로운 HTML을 받아 오고, 받아온 리소스를 해석한 후 브라우저에 보여줬다.(서버에서 렌더링해줌) 새로운 화면을 보여줘야할 때마다 서버로 요청을 한다면 성능상에 문제가 발생할 수 있으므로 Front/Back을 분리하여 React같은 프레임워크를 사용하여 뷰 렌더링을 전담으로 하도록 하고, 인터랙션이 발생하면 필요한 부분만 자바스크립트를 통하여 업데이트 해준다. SPA에서 다른 화면을 보여주는 것을 "라우팅"이라고 불린다. 리액트에서 라우팅 라이브러리는 react-router, reach-router, Next.js 등 여러 가지가 존재한다. (Vue-Router랑 비슷할듯) 2. SPA의 단점 장점이 있으면 단점도 있는.. React immer 1. immer immer 라이브러리를 통해 불변성을 유지하는 작업을 쉽게 처리할 수 있다. 첫 번째 파리미터는 수정하고 싶은 파라미터이고 두 번째 파리미터는 상태를 어떻게 업데이트할지 정의 state의 불변성을 유지하면서, 새로운 상태를 생성해준다. import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 값만 바꾸기 draft... = ; }); React 컴포넌트가 리렌더링이 발생하는 상황 1. 컴포넌트가 리렌더링이 발생하는 상황 자신이 전달 받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 React 컴포넌트 스타일링 1. 일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방법 2. SASS(Syntactically Awesome Style Sheets) CSS 전처리기 중 하나로써, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줌 SASS에서는 .scss와 .sass를 지원한다. SASS의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 Supuerset이다. SASS와 SCSS의 간단한 차이는 {}(중괄호), ;(세미콜론)의 유무정도이고 SCSS의 경우 기존 CSS와 문법적으로는 큰 차이가 없다. 보통 .scss를 좀 더 자주 사용된다고 한다. node-sass 라이브러리를 통해 SASS를 CSS로 변환한.. React Hooks 리액트팀에서도 훅과 관련된 개발을 적극적으로 하고 있고 현재 새롭게 만들어지는 컴포넌트에 대해서 함수형으로 선언하는게 대세인데 여기에 리액트 훅이 한 몫하고 있다. 1. useState 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 예) const [value, setValue] = useState('initial data'); 리턴 배열의 첫 번째는 상태값, 두 번째는 상태를 설정하는 값 2. useEffect 렌더링될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있는 Hook 기본적으로 렌더링되고 난 직후마다 실행됨 클래스형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태 마운트만 실행하고 싶을 때는 두 번째 파라미터에 '[]' 비어 있는 .. React 라이프사이클 메서드 1. render() 함수 이 메서드 안에서는 this.props와 this.state에 접근할 수 있으며, 리액트의 요소를 반환한다. 이벤트를 처리하는 곳이 아닌 곳에서 setState를 사용하면 안되고 DOM에 접근하면 안됨 DOM 정보를 가져오거나 state에 변화를 줄때는 componentDidMount에서 처리해야함( Vue에서 mount() 훅에서만 DOM에 접근한 것과 동일한 것으로 보임) 2. constructor 메서드 constructor(props) { } 다른 객체지향 언어에서와 동일하게 컴포넌트를 만들 때 처음으로 실행되고 초기 state를 설정할 수 있다. 3. getDerivedStateFromProps 메서드 리액트 버전 16.3 이후에 생겨난 라이프사이클 메서드(버전확인은 .. React 라이프사이클 1. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. constructor -> getDerivedStateFromProps -> render => componentDidMount 순으로 수행 constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드 render: UI를 렌더링하는 메서드 componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드(Vue로 치면 mount() ) 아마 여기에서 DOM 접근이 가능할듯 2. 업데이트 prpos가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceU.. React Event 1. React event에서 주의할 사항 이벤트의 이름은 카멜 표기법으로 사용할 것 이벤트에 자바스크립트 코드를 전달하는게 아니라, 함수 형태의 값을 전달 할 것 DOM 요소에만 이벤트 설정이 가능하고 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음(컴포넌트에는 props를 전달할 뿐) 예제) DOM Event Handling 부분에 객체 형태로 전달. 객체가 아닌 자바스크립트 코드를 넣으면 실행안됨 Warning 문구로 "Warning: Expected `onChange` listener to be a function, instead got a value of `string` type." React의 이벤트에서는 문자열이 아닌 Function 형태를 기대함 import React, { Componen.. 이전 1 2 3 4 다음
