본문 바로가기

React & TypeScript42

[React] useCallback / useMemo 일단 괜찮게 보이는 링크만 남겨둔다. useCallback / useMemo 참조 React Hooks: useCallback 사용법 Engineering Blog by Dale Seo www.daleseo.com React Hooks: useMemo 사용법 Engineering Blog by Dale Seo www.daleseo.com 2021. 4. 13.
[React] 자식 컴포넌트에서 부모로 데이터 보내기 (child -> parent) by React Hook 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com #2021.06.25 내용 추가 : 이 것의 본질은 props 로 내려주는 것이 data가 아니라 function 이라는 것이다. 그 게 본질이다. 너무 어렵게 설명을 이리저리 했던 것 같다. 내가 이해한 본질은 이러했다. 리액트를 쓰다보면 parent의 props에 속성 값을 보내서, child에서 처리하는 것 뿐만아니라, child에서 처리한 것을 부모로 보내주어야 할 때가 있다. 아래와 같이 부모로 부터 전달받은.. 2021. 3. 30.
[Redux] 왜 쓸까? props의 상태 값에 따라 구동되어야할 함수들이 서로 의존적이지 않고 독립적으로 작성하기 위해서이다. 그래서 props에서 state(상태)가 변경되면, 그에 맞춰서 Action을 해주는 것을 reducer에서 정의하고, dispatch를 이용해서 render에 전달해주는 것이다. 이렇게 작성해야, reducer에서 정의한 상태값에 따라 작동되어야 할 Function(함수)들을 독립적으로 작동되게끔 작성하는 것이 가능하다. 함수도 단순하게 할 수 있으며, 리액트의 (독립적인)컴포넌트 구현 개념과도 일치하게 된다. Redux - 5.3. Redux의 적용 : state의 변화에 따라서 UI 반영하기 by 생활코딩 조금 더 깊게.. 조금 더 깊게 들어가면, dispatch가 전달해주는 action.type.. 2021. 2. 17.
[React] super(props); 보통 아래와 같은 구조로 리액트 Component 구조를 갖는다. class App extends React.Component { constructor() { super(); ... } render() { return (); } } super 는 상위 객체의 Method를 가져오는 것이다. 위에서 super();는 React Component에 object 와 Method를 전달하기 위한 것이다. super(props), constructor(props)를 선언할 경우도 상위 컴포넌트에 object를 전달해주는 성격이 된다. 참조: min9nim.github.io/2018/12/super-props/ velog.io/@hytenic/Javascript-javascript-OOP-Class-Super ve.. 2021. 2. 16.
[React] useEffect 는 무엇인가? 간단하게 말하면, Render 이후에 처리하는 함수이다. Render가 되었다는 것은 DOM 구조까지 이미 생성이 모두 완료된 시점이다. 이 시점에 처리해야 할 일들을 effect에 모아두었다가 처리하는 것이다. DidMount, DidUpdate, willUnmount 이 세가지 상황에 쓰인다. 참조 : ko.reactjs.org/docs/hooks-effect.html#example-using-hooks-1 2021. 2. 2.
[Redux] Redux를 써야 하는 이유? 상태가 변경되었을 때 처리해야 하는 요소를 통합적으로 처리하기 위해서. 효율성을 위해서 사용한다. 미 사용했을 때는 아래와 같은 일이 발생한다. 출처 : 생활코딩 youtu.be/bn-8isrtx0k?t=356 2021. 2. 1.