관심있는것들

useMemo는 일종의 캐시역할을 하는 훅이다. function useMemo(nextCreate, deps) { console.log("deps = ", deps); if (!memorizedStates[cursor]) { const nextValue = nextCreate(); memorizedStates[cursor] = [nextValue, deps]; cursor = cursor + 1; return nextValue; } const nextDeps = deps; const [prevValue, prevDeps] = memorizedStates[cursor]; if (prevDeps.every((prev, index) => prev === nextDeps[index])) { cursor = cu..

관리해야할 state가 많아질 수록 리듀서 훅을 사용할 때가 온다. function useRegisterForm() { const [state, setState] = useState({ value: { nickname: "", password: "" }, error: { nickname: "", password: "" }, }); const handleChange = (e) => { setState({ ...state, value: { ...state.value, [e.target.name]: e.target.value, }, }); }; const handleReset = (e) => { setState({ value: { nickname: "", password: "" }, error: { nickn..

function useRef(initialValue) { if (!isInitialized[cursor]) { memorizedStates[cursor] = { current: initialValue }; isInitialized[cursor] = true; } const memorizedState = memorizedStates[cursor]; cursor = cursor + 1; return memorizedState; } closure를 사용해서 useRef를 사용하는 function componenet가 re render되더라도 주어진 값을 보존할 수 있도록 하였다. https://www.inflearn.com/questions/1211434/4-1%EC%9E%A5-%EB%A0%88%ED%94%8..

function createContext(initialValue) { const emitter = createEventEmitter(initialValue); function Provider({ value, children }) { React.useEffect(() => { emitter.set(value); }, [value]); return {children}; } return { Provider, emitter, }; } function useContext(context) { const [value, setValue] = React.useState(context.emitter.get()); React.useEffect(() => { context.emitter.on(setValue); return ..

순수함수는 2가지 특징을 가진다. 입력이 같으면 결과도 같다. 부작용이 없다. 몇번을 실행하더라도 자신의 일만 할 뿐, 함수 바깥 공간을 건드려서는 안된다. 컴포넌트의 render 함수는 순수해야한다. 즉 , 컴포넌트의 state를 변경하지 않고 호출될 때마다 동일한 결과를 반환해야하고 브라우저와 직접적으로 상호작용하지 않는다. const Counter = () => { const [count, setCount] = React.useState(0) document.title = `count: ${count}` const handleClick = () => setCount(count + 1) return plus } export default Counter 1) document api를 직접 함수 컴포넌트..

class Contract { constructor(name) { this.name = name; } sign() { const capturedName = this.name; setTimeout(() => console.log("서명인: ", capturedName), 3000); } } // const contract = new Contract("user"); contract.sign(); contract.name = "user2"; function createContract(name) { const sign = () => { setTimeout(() => console.log("서명인: ", name), 3000); }; return { sign, }; } const contract = createC..

Dialog export const layoutContext = React.createContext({}); layoutContext.displayName = "LayoutContext"; export class Layout extends React.Component { constructor(props) { super(props); this.state = { dialog: , }; } render() { const value = { dialog: this.state.dialog, }; return ( {this.props.children} ); } } export const DialogContainer = () => ( {({ dialog }) => dialog && {dialog}} ); DialogC..

일반적으로 라우팅은 웹 서버의 역할이다. 클라이언트에서 특정 주소를 웹서버에게 요청하면 서버는 이에 맞는 화면을 클라이언트에게 제공하는 것이다. 클라이언트에게 라우팅역할을 맞길 수 도 있다. 웹 서버가 항상 같은 리소스를 제공하고 브라우져가 이 리소스를 바탕으로 요청 주소에 따라 화면을 렌더링 하는 방식이다. (react라면 component rendering) const App = () => { const { pathname } = window.location; return ( {pathname === "/order" && } {pathname === "/cart" && } {!["/order", "/cart"].includes(pathname) && } ); }; export default App; ..

프롭 드릴링의 문제 값의 출처 파악 어려움 , 컴포넌트 중첩이 깊숙히 될수록 B는 A와 C 사이에 위치했다는 이유만으로 고유의 역할과 무관하게 메시지를 전달해야함 이벤트 에미터 패턴을 통해 해결 할 수 있다. 두 객체 간의 메시지를 비교적 자유롭게 주고 받을 수 있는 통로 역할이다. const createEventEmitter = (value) => { let handlers = []; const on = (handler) => handlers.push(handler); const off = (handler) => { handlers = handlers.filter((h) => h !== handler); }; const get = () => value; const set = (newValue) => {..

CartPage / ProductItem const ProductItem = ({ product, onClick }) => { const { name, price, thumbnail } = product; return ( {name} {price.toLocaleString()}원 {onClick && 주문하기 } ); }; export default ProductItem; 기존의 ProductItem component 는 CartPage, ProductPage 두 곳에서 item list들을 렌더링 할 때 쓰였다. CartPage에서는 이미 주문한 목록의 item들이기 때문에 주문하기 button이 필요하지 않았다. 이를 위해 ProductItem을 onclick을 주입 받았을 때만 button이 존재하..