Learn/React (12) 썸네일형 리스트형 Custom Hooks Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다 Custom Hook의 예시 useFetch Hook const useFetch = ( initialUrl:string ) => { const [url, setUrl] = useState(initialUrl); const [value, setValue] = useState(''); const fetchData = () => axios.get(url).then(({data}) => setValue(data)); useEffe.. Virtual DOM 과 React Diffing Algorithm Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM 객체를 활용 -> 사본이기에 가볍다. 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용 컴포넌트가 바뀐부분만 리렌더링하는 것과 비슷? DOM의 조작 속도가 느려지는 이유 DOM은 계층적 형태의 트리 구조로 구성 트리는 “데이터 저장"의 의미보다는 “저장된 데이터를 더 효과적으로 탐색”하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조 DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우(Refl.. 번들링과 웹팩 번들링 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 번들링의 필요성 아래와 같은 상황들이 일어난다면, 어려움에 처할 수 있다. 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기가 어렵습니다. 결국 그대로 공백을 되돌려서 코딩 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생 따라서 필연적으로 용량을 줄이고 .. Redux Redux란? 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 상태 관리를 해줄 목적으로 사용 저장소를 따로 만들어 상태를 원하는 곳에서 쓸 수 있게 해줌 Redux의 구조 Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면, React는 화면을 다시 렌더링 Redux의 3원칙 1... 상태 관리 React 컴포넌트의 상태 React의 상태는 컴포넌트의 변경 가능한 데이터 저장소 변경 가능하다는 것은 상태 값을 변경할 수 있다는 것 상태를 관리하기 위해선 React의 구조 부터 알아야 한다! React로 사고하기 1단계: UI를 컴포넌트 계층 구조로 나누기 2단계: React로 정적인 버전 만들기 3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 4단계: State가 어디에 있어야 할 지 찾기 5단계: 역방향 데이터 흐름 추가하기 전역상태와 로컬상태 전역상태 : 여러 컴포넌트에서 관리되는 상태 -> 다른 컴포넌트와 상태를 공유하고 있기 때문에 앱 전반에 영향을 미친다. ex) 다크모드 , 언어번역모드 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태 -> 특정 컴포넌트 안에.. CDD CDD (Component Driven Development) 재사용 할 수 있는 UI 컴포넌트를 만들어 둔 다음 용도에 맞게 재사용 하는 것. 컴포넌트를 하나의 조각이라 생각하고 큰 틀에 맞춰 끼워나간다고 생각. Styled Components CSS in JS 라는 개념이 대두되면서 나온 라이브러리 CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 그 중 가장 인기 있는 것이 Styled Components Styled Components 사용법 // 터미널에서 입력 후 npm install --save styled-components // 사용할 파일로 불러오기 im.. React Effect Hook / Ajax Side Effect 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수 React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생 Pure Function 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미 Effect Hook API useEffect((함수)=>{ }, [종속된 배열]) 컴포넌트 생성 후 처음 화면에 렌더링(표시) 컴포넌트에 새로운 props가 전달되며 렌더링 컴포넌트에 상태(state)가 바뀌며 렌더링 Ajax(Asynchronous Javascript And XML) 비동기 자바스크립트와 XML을 사용하는 기술 fetch fetch(url) .then((response).. React 데이터흐름 / state 끌어올리기 React 데이터 흐름 부모로부터 자식으로만 데이터가 전달이 가능 데이터를 전달하는 주체는 부모 컴포넌트. 데이터 흐름이 하향식(top-down)임을 의미 유지보수를 좀 더 편리하게 만들 수 있도록 해주는 역할 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만어야 한다. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다. EX) 애플리케이션은 다음과 같은 데이터를 가지고 있을 때 최소한의 State는 다음과 같다. State 끌어올리기 .. 이전 1 2 다음
