dev/React 썸네일형 리스트형 Redux 개념 이해하기 Flux 패턴 redux는 Flux 패턴의 구현체입니다. 따라서 Flux 패턴을 먼저 이해하면 자연스럽게 Redux를 이해할 수 있습니다. facebook은 우리가 흔히 알고 있는 MVC 패턴을 사용하는 대신, Flux라는 새로운 방식의 아키텍처를 사용하고 있습니다. Flux의 가장 큰 특징은 데이터가 한쪽 방향으로만 흐른다는 것입니다. 이를 단방향 데이터 흐름 이라고 표현합니다. 아래의 글을 읽으면 Flux가 얼마나 직관적인지 알 수 있습니다. Flux 패턴에서 모든 데이터의 변경은 action 으로 표현됩니다. 예를 들면 '카운터 증가' 를 다음과 같이 액션으로 정의할 수 있습니다. const increaseCounterAction = { type: "INCREASE_COUNTER" }.. [번역글] react functional component에서 setState를 동기식으로 사용하기 react 프로젝트에서 본격적으로 functional component를 사용한 이후로 처음 맞닥뜨린 이슈는 useState가 비동기로 동작하는 것이었습니다. setter를 호출한 뒤, 바로 값을 가져다 쓰면 업데이트 되지 않은 값이 참조되는😥 문제인데요... 아마 함수형 컴포넌트를 사용하시는 분이라면 한번쯤 고민해봤을 문제라고 생각합니다! 그리고 저처럼 왜 react는 이걸 비동기로만 쓰게 해놓은거야😡 라며 화내보신 분도 분명.. 분명 한분쯤은 있으리라 생각합니다. 글의 원문은 함수형 컴포넌트에서 useState를 동기식으로 사용하는 방법과, react 팀이 왜 이 기능을 기본 기능으로 추가하지 않는지를 모두 설명해 줍니다! 원문을 참조하시려면 useStateWithPromise: a custom ho.. React Hooks useState 함수형 컴포넌트에서 상태를 관리할 때 쓴다. const [state, setState] = useState(initialState); 반환된 배열 중 첫번째 원소는 값을 저장하는 state 이며, 두번째 원소는 setter 함수다. state를 변경할 때에는 반드시 이 setter를 이용해야 렌더링이 정상적으로 이루어진다. useState로 상태 변경 시, 렌더링이 된 후에 업데이트된 state를 조회 가능하다. 즉, useState가 호출된 이후라도 렌더링이 수행되지 않았다면 업데이트 이전의 state가 조회된다. useRef const refContainer = useRef(initialValue); initialValue를 설정하면 refContainer.current가 해당 값으로.. 이전 1 2 다음