본문 바로가기

All

 (147)
what is Redux? what is Redux? Redux is a library, managing cross-component or app-wide state. local state | 하나의 컴포넌트에서 사용되는 state ex) input에 입력한 state cross component state | props을 통해 여러 컴포넌트에 영향을 미치는 state ex) modal app wide state | app 전체(또는 대부분)에 영향을 미치는 state ex) authorization context vs. Redux 여러 컴포넌트에 영향을 미치는 state나, 앱 전체에서 사용될 수 있는 state를 관리할 때 react의 context api를 이용할 수 있다. 즉 redux는 context와 같은 역할을 한다...
Validation when to validate? onSubmit 사용자가 입력을 진행하는 중에 경고 메세지를 보여주지 않는다. 불필요한 warning을 피할 수 있지만, 입력값에 대한 유효성 피드백이 다소 늦어진다. onBlur submit과 마찬가지로, 불필요한 경고 메세지를 보여주지 않을 수 있다. form의 touched 상태를 관리할 때 유용하다. onChange 사용자의 모든 key stroke에 대해 유효성 검사를 진행한다. 빠른 피드백을 보여주는 동시에, 불필요한 경고 메세지(값을 전부 입력하기도 전에 유효성 평가)를 띄운다. useRef vs. useState // useState const [name, setName] = useState(''); const changeHandler = (e) => { s..
custom Hooks what is custom Hooks? custom hooks도 결국 일반적인 함수의 하나이다. 단, 다른 함수들과 달리 블럭 안에 stateful logic을 포함할 수 있다. => hooks와 state를 사용할 수 있다. 이 때 어플리케이션에서 중복으로 사용되고 있는 로직을 커스텀 훅으로 만들면, 여러 곳에서 재사용할 수 있다. 로직은 공유하고, state는 따로 갖는다. src/hooks 폴더를 만들어서 관리한다. remind | rules of hooks 컴포넌트 함수/ 커스텀 훅이 아닌 함수 안에서는 리액트 훅을 사용할 수 없다. (컴포넌트/커스텀)함수의 top level(direct level)에서 리액트 훅을 호출해야 한다. how to make customHooks? // use-coun..
HTTP Request without using Database loading state function App() { const [movies, setMovies] = useState([]); const [loading, setLoading] = useState(false); async function getMovies() { setLoading(true) const res = await fetch('https://swapi.dev/api/films') // 에러 핸들링 const data = await res.json() const fetchedMovies = data.results.map((item) => { return { id: item.episode_id, title: item.title, openingText: i..
Optimization | how does react work? VDOM & RealDOM React | 핵심 기능은 컴포넌트를 만들고, props, state, context 등으로 그 컴포넌트를 관리(manage)하는 것이다. 컴포넌트가 업데이트 되어 함수를 재실행하고, 그 결과 re-rendering이 일어나야 한다면 리액트는 이것을 리액트 DOM에게 알린다. 이 때 리액트는, 렌더링하기로 결정한 components를 tree로 나타내는 Virtual DOM을 이용한다. => 화면에서 컴포넌트가 어떻게 보여야 할 것인지 결정하고, 이 정보를 스냅샷의 형태로 ReactDOM에 전달한다. ReactDOM | 브라우저 화면에 컴포넌트를 출력한다. 실제 DOM 요소를 조작해서 전달받은 Components tree를 화면에 렌더링한다. ReEvaluate vs. ReRe..
etc | Image, Icon, Input image import 바닐라 js에서 import 할 수 있는 파일은 js 파일 뿐이다. 하지만 리액트에서는 css 파일이나, 이미지 파일을 import 할 수 있다. 프로젝트를 배포하면, 우리가 import한 이미지가 어플리케이션에 포함되도록 리액트가 코드를 변환해 주기 때문이다. import image from '../../assets/meals.jpg' // 확장자 생략 불가능 const image = () => { return } +) 타입스크립트 리액트에서 이미지를 import 하려면, 프로젝트 폴더 바로 아래에 index.d.ts 파일을 생성하고, tsconfig에 옵션을 추가해 주어야 한다. // index.d.ts declare module '*.png'; declare module '*..
Rules of Hooks react hooks는 use로 시작하는 모든 함수를 말한다. react hook은 react 함수의 direct top level에서 호출해야 한다. 리액트 함수는 다음을 말한다. component function custom hooks ??? 예외 +) useEffect Hook useEffect 내부에서 참조하고 있는 모든 것을 dependency로 주입한다.
useContext props chain & context 리액트는 화면에 렌더링 할 여러 컴포넌트로 앱을 구성한다. 이 구조를 component tree라고 부르며, 이 때문에 props chaining이 발생한다. 예를 들어 F가 로그인 컴포넌트 이고, 컴포넌트 A와 C에서 로그인과 관련된 data를 필요로 한다고 해보자. A, C와 F가 공통적으로 공유하고 있는 부모는 App 컴포넌트 뿐이다. 따라서 F의 로그인 state를 App까지 끌어 올린 후에, 다시 App에서 그 데이터를 A, C의 props으로 전달해 주어야 할 것이다. 어플리케이션의 규모가 커지면, props chaining은 아래 예제처럼 복잡하고 번거로워 질 수 밖에 없다. // login form const onSubmitHandler = (e) =..

티스토리툴바