React 썸네일형 리스트형 [React] LifeCycle(함수형,클래스형) 함수형 컴포넌트 LifeCycle useEffectside-effect를 따로 관리하여 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수useEffect()는 랜더링이 모두 끝난 다음에 실행된다.가용 범위useEffect(()=>{}) : 랜더링이 될 때 마다 실행useEffect(()=>{}, []) : 최초 랜더링(마운트)할 때만 실행useEffect(()=>{}, [state]) : 특정 컴포넌트 변경 시 실행useCallback()useCallback은 실행할 문장 또는 변화를 주는 기능을 제어하기 위해서 사용한다. 클래스형 컴포넌트 LifeCycle1. Mount: 페이지에 컴포넌트가 나타나는 것(빈 화면에서 -> 컴포넌트가 나타나는 것) Constructor: 새로운 컴포넌트를 .. 더보기 [React] Flux, Redux 패턴 Flux 패턴 순서: View -> Action -> Dispatcher -> Store -> View View: 상태가 변화 된 것을 랜더링하여 확인한 것Action: 클릭등과 같은 이벤트들을 의미Dispatcher: Action을 수행하기 위한 함수를 실행하는 부분Store: 이전 값과 상태 변화 값을 확인 후 State의 변화를 저장하는 곳 Redux 패턴 순서: Component -> Action -> Reducer -> Store -> State -> ComponentFlux 패턴과 다르게 하나의 App에서 하나의 Store만 존재한다.Flux 패턴을 좀더 쉽게 사용할수 있는 라이브러리Component (UI)Action이 발생한다.나중에 변경된 State를 반영하기 위하여 Store가 구독을.. 더보기 [React] Context, useState(),useInput() createContext() : Context를 만들어주는 함수 Provider: 컴포넌트 간에 공유하는 값을 value라는 props로 설정하여 자식 컴포넌트에서 바로 접근 하는 Context 내부의 컴포넌트 value에 color:"green" 을 담아 자식 컴포넌트에 보낸 후 Consumer: Provider에서 제공한 value 값을 현재 context 값으로 받아와 사용하게 해주는 Context 내부의 컴포넌트 자식 컴포넌트에서 context를 통해 style을 지정하고 있다. useState() : 함수형 컴포넌트에서 상태를 관리하는데 도와주는 hook 함수 fontSize: 현재 상태를 관리할 변수setFontSize: fontSize변수의 값을 변경시켜주는 함.. 더보기 [React] Component, props, map JSX: JavaScript XML일반 자바스크립트의 형태의 코드로 변환이 가능하다.컴포넌트도 JSX안에 작성이 가능하다. props: 객체사용하는 컴포넌트에서 객체를 key로 접근한다. Container에서 Component01로 name값과 color값을 props로전달하여 Component01에서 스타일을 적용하고이름을 출력할 수 있다.Container에서 Component02태그 내부에 작성한 내용을 props.children으로 가져와 출력할 수 있다. map: 반복되는 컴포넌트를 랜더링하기 위한 함수배열 내 각 요소를 원하는 규칙에 따라 변환 후 새로운 배열을 생성한다.useAsync : 비동기 작업 상태를 관리하게 도와주는 커스텀 훅fetch로 데이터를 받아와 value에 값을 저장하고 i.. 더보기 [React] 기초 ReactJS : 복잡한 사용자 인터페이스를 쉽게 구축하기 위해서 페이스북에서 제작한 자바스크립트 기반의 라이브러리싱글 페이지 애플리케이션 OR 모바일 애플리케이션 개발에 주로 사용한다.특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하지않고 기존 코드를 없애고 다시 새롭게 랜더링 Mount : 가장 처음 랜더링render() 함수를 사용하여 view를 정의하고 초기 랜더링을 진행한다.Rendering: 화면에 보여주는 것코드가 번역되어 실행된 뒤 화면을 통해 사용자에게 보여준다.Re-Rendering: 뷰를 업데이트 해야 할때 다시 지웠다가 그림전체를 모두 지우고 다시 그리는 것은 비효율적이기 때문에 이전의 DOM트리와 새로운 DOM트리를 비교한 뒤 변경된 요소 부분만 리랜더링 한다.단.. 더보기 이전 1 다음
