개발정리

스토리란 무엇인가?스토리는 UI 컴포넌트의 렌더링된 상태를 포착합니다.개발자는 컴포넌트당 여러 개의 스토리를 작성하여 컴포넌트가 지원할 수 있는 모든 상태를 설명합니다. storybook을 설치하면 CLI가 storybook으로 빌드할 수 있는 컴포넌트 유형(버튼,헤더,페이지)을 보여주는 예제 컴포넌트를 만듭니다. 각 예제 컴포넌트에는 지원하는 상태를 보여주는 스토리 세트가 있습니다. UI에서 스토리를 탐색하고 . 으로 끝나는 파일에서 스토리 뒤에 있는 코드를 볼 수 있습니다. .stories.js 스토리는 컴포넌트 예제를 작성하기 위한 ES6모듈 기반 표준인 Component Story Format(CSF)으로 작성됩니다. 버튼 컴포넌트 부터 시작해 보겠습니다. 스토리란 문제의 컴포는트를 어떻게 렌더링..

항상 개발할때 컴포넌트를 만들면 그 컴포넌트를 화면으로 보기위해 App.js로 올려야 했습니다. 하지만 저는 컴포넌트를 만들고 해당 컴포넌트만 따로 볼 수 있는 방법을 알고 싶었습니다. 그래서 찾아 보니 storyBook 이라는 것을 발견 했습니다.. 스토리북이 뭐여?스토리북은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있게 해주는 오픈 소스 도구 입니다. 개발자들이 컴포넌트의 다양한 상태를 시각적으로 확인하며 작업할 수 있도록 도와줍니다. 스토리북 도입의 장점스토리북을 도입하면 컴포넌트의 재사용성과 유지보수성이 크게 향상됩니다. 개발자는 컴포넌트를 독립적으로 개발하고 테스트 할 수있어, 프로젝트의 복잡성을 줄일 수 있습니다. 스토리북 맛만이라도 보자...npx create-react-app@lat..

상태 관리작은 리액트 카운터 컴포넌트를 만들어 봅시다.이것은 컴포넌트 상태의 수를 추적하고 버튼이 클릭 되었을때 숫자를 증가시킵니다. function Counter(){ //state: a counter value const [counter,setCounter] = useState(0); //Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter +1); } //view: the UI definition return( value: {counter..

리덕스 왜 쓰지?우리는 이때가지 리덕스라는 라이브러리를 사용하지 않고도 리액트 앱을 잘 만들어 냈습니다.하지만 프로젝트의 크기가 커질수록 전역적으로 관리해야하는 상태의 수가 많아질 수도 있으며 프로젝트가 복잡해 질수 있습니다.다음은 리덕스 공신문서에서 언제 리덕스를 사용해야하는지 명시해 놓은 것 입니다. 어쩌면 리덕스는 당신에게 필요없는 라이브러리 일지도 모릅니다.오히려 코드가 복잡해지고 빙 돌아간다는 느낌을 받을 것 입니다. https://medium.com/lunit/%EB%8B%B9%EC%8B%A0%EC%97%90%EA%B2%8C-redux%EB%8A%94-%ED%95%84%EC%9A%94-%EC%97%86%EC%9D%84%EC%A7%80%EB%8F%84-%EB%AA%A8%EB%A6%85%EB%8B..

useReducer는 컴포넌트에 reducer를 추가하도록 하는 리액트 훅 입니다. const [state,dispatch] = useReducer(reducer,initialArg,init?) Reference reducer로 state를 관리하기 위해 컴포넌트 상위에 useReducer를 호출하세요 파라미터 -reducer:어떻게 state가 update되는 지를 명시해놓은 reducer 함수입니다. reducer의 파라미터는 state와 action을 가집니다. 그리고 다음 state를 리턴해야 합니다. state와 action은 어떠한 타입도 가능합니다. -initialArg:초기상태로 계산된 값,어떠한 타입도 가능 -(optional)init:초기화함수, 초기 state를 리턴합니다. 만약 정의..

useMemo란? -리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅 -동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내 사용 예제 import React, { useState,useMemo } from 'react'; function App() { const [val1,setVal1]=useState(0); const [val2,setVal2]=useState(0); const handleAdd2 = ()=>{ setVal2((prev)=>prev+1); } const handleAdd1 = ()=>{ setVal1((prev)=>prev+1); } const computedVal = ()=>{..