react(18)
-
[React.js] Context
컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼을 만들고 속성만 바꿔주면 되기 때문에 굉장히 편하다 일반적인 문자열같은 자바스크립mm-study-front.tistory.com와 동일한데 props의 단점까지 보완 가능 → props는 부모에서 자식으로만 데이터 전달 가능 그래서 프로젝트 진행할 때 트리구조식 자식의 자식에게 주고 받을 수가 없어 app.jsx에 많은 코드들이 쌓이게 됨 →이를 프롭스 드릴링(Props Drilling)이라 함context는 props가 전해주던 데이터들을 ..
2024.06.29 -
[React.js] useCallback
리액트 훅 중 하나로 불필요한 함수의 재생성을 방지할 수 있다 https://mm-study-front.tistory.com/43 [React.js] React Hooks클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드 과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음→ 근mm-study-front.tistory.comhttps://mm-study-front.tistory.com/53 [React.js] React.memo리액트의 내장함수로 컴포넌트를 인수받아 최적화된 컴포넌트로 만들어서 반환해 준다 이 결과로 반환된 컴포넌트는 props를 기준으로 기억됨 https://mm-study-front.tistory.com/39 [..
2024.06.28 -
[React.js] React.memo
리액트의 내장함수로 컴포넌트를 인수받아 최적화된 컴포넌트로 만들어서 반환해 준다 이 결과로 반환된 컴포넌트는 props를 기준으로 기억됨 https://mm-study-front.tistory.com/39 [React.js] State와 Props리액트 컴포넌트에는 여러 개의 state가 들어올 수 있음→ https://mm-study-front.tistory.com/38 리액트는 prop라는 기능이 있어서 상속이 편리→https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가mm-study-front.tistory.com 그래서 부모가 리렌더링이 되더라도 props가 바뀌지 않으면 리렌더링이 되지 않음 → 불필요한 리렌더링 방지로 웹 성능 최적화 O..
2024.06.27 -
[React.js] useMemo
리액트 훅 중 하나로 불필요한 연산을 최적화해준다 동일한 연산이 반복되면 계속 다시 연산시키는 게 아니라최초에 한번 연산 후 메모리에 결괏값을 저장하고 그 값을 가져오는 방식 자식 컴포넌트 내부의 연산은 부모 컴포넌트가 리렌더링이 되면 계속 재실행된다이는 연산이 짧으면 그나마 괜찮으나 연산이 길어지면 웹 성능을 떨어뜨림→ 이때 useMemo를 사용해서 연산이 불필요하게 수행되지 않게 하는 거임 https://mm-study-front.tistory.com/51 [React.js] 최적화최적화 (optimization): 목적에 따라 가장 좋은 결과가 얻어지도록 성능을 개선하는 행위로 컴파일러에서 원시 프로그램이 목적 프로그램을 생성하는 과정에 있어서, 목적 프로그램의 실행 시간mm-study-front..
2024.06.26 -
[React.js] useReducer
컴포넌트 내부에 새로운 state를 생성하는 react hook 종류 중 하나로useState를 대체해서 쓸 수 있음 그럼 useState와 다른 점이 있는가? → Yes. useReducer는 상태 관리 코드를 컴포넌트 외부로 분리 가능 useState는 컴포넌트 내부에 상태 관리 코드들이 계속 추가가 되어 길고 복잡해짐 https://mm-study-front.tistory.com/43 [React.js] React Hooks클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드 과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음→ 근mm-study-front.tistory.comhttps://mm-study-front...
2024.06.24 -
[React.js] 간단한 실습3. 투두리스트 준비
나는 이전에 학원을 다니면서 vue.js를 배운 적이 있다그때 실습으로 https://mm-study-front.tistory.com/47 [Vue.js] 투두리스트 진행사항학원 다닐 때 만들었던 거 수정 진행 중 1. 파이어베이스 기간이 만료되었기에 파이어베이스 읽고 쓸 수 있는 기한 없앰2. 디자인 변경 내가 하고 싶은 것 Vue 라우터를 이용해 버튼을 누를mm-study-front.tistory.comvue를 이용해 투두리스트를 만든 적이 있다 값을 입력하고 출력하는데 DB서버를 이용했다 리액트는 vue랑 뭐가 다른지 실제로 구동하는 애플리케이션을 만들면서 비교해 봐야지 우선 뷰 투두리스트는 파이어베이스와 연동해 데이터를 저장하고 출력했는데 리액트는 useHook으로 state, value..
2024.06.20