노인과바다의 개발로그 노인과바다의 개발로그

useMemo와 useCallback의 차이는 다음과 같다. memo가 값을 저장하는거에 반에 callback은 함수 그 자체를 저장한다. useMemo: Returns and stores the calculated value of a function in a variable useCallBack: Returns and stores the actual function itself in a variable 예를들어 Average라는 컴포넌트에 아래와 같이 함수가 여러개 있다면 const Average = () => { const onChange = ()=>{} const onInsert = ()=>{} } 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 컴포넌트의 랜더링이 자주발생하거나..

useMemo를 사용해야 할 필요성이 있는 경우는 크게 두가지 경우가 있다. 1. 연산이 큰 작업이 반복되어서 호출 될 때 2. Referential equility가 발생할 경우에. 먼저 첫번째 경우를 살펴보자. 위와 같은 예제에서 input의 값을 증가시키면 그 두배가 되는 값을 화면에 렌더링 해주는데 약 0.5초의 시간이 걸린다. slowFunction에서 반복을 100000000만큼 돈후에 그 값을 두배로 해주기 때문이다. 여기까지는 이해가 쉽다. 하지만 여기에서 changeTheme버튼을 누르면 어떻게 될까? 마찬가지로 0.5초의 시간이 흐른후 화면의 theme색깔이 바뀐다. 왜그럴까? 이는 리엑트에서 state를 업데이트 하면 컴포넌트 전체를 다 리렌더링 하기 때문이다. 즉, 시간이 걸리는 작..

리엑트 렌더링에서 함수컴포넌트 = just regular function이다. 차이가 있다면 JSX를 리턴하고 있다는 것. 함수는 누군가 불러와야 사용이 된다. 함수형컴포넌트를 보면 분명히 다른곳에서 불러오는 JSX가 있을 것이다.리엑트가 여기서 JSX를 통해 함수형컴포넌트 들을 하나씩 빠짐없이 호출하고 이것을 DOM명령어로 변환하여 화면에 출력한다. 중요한점은 리엑트는 이 행동을 절대로 다시 반복하지 않는다. 즉 초기에 렌더링 되었을때만 모든 함수를 호출한다. 이로 인해 벌어지는일이 컴포넌트 내의 변수가 바뀌더라도 컴포넌트 함수는 다시 재실행 되지 않기 때문에 화면에서 그 변수값을 렌더링하고 있는 부분이 있다면 화면상에 변화가 나타나지 않는다. 화면을 변화(재렌더링) 하게끔 함수를 다시 호출하기 위해서..

useEffect란? 리액트에게 렌더링 후 컴포넌트가 특정 함수를 실행하게끔 할 때 사용. 기본적으로, useEffect는 첫번째 렌더링(render)이 될 때 실행된다. useEffect 사용법 1.Update 컴포넌트가 렌더링될 때마다 매번 콜백이 호출 useEffect(()=>{ 함수} } ( 컴포넌트가 화면에 맨처음 랜더링 + 다시랜더링될 때(ex:state가 업데이트될 때 마다 컴포넌트는 다시 랜더링)) 다시 렌더링. 엄밀하게는 화면이 랜더링 된 후에 콜백이 실행됨. 여기서 문제가 생김. setState로 state값에 변화가 생겨 컴포넌트가 다시 렌더링 된다는 말은

Routing이란? 어떤 URL에서 어떤 화면을 보여줄 것 인가를 정하는 것 Connect the URL URL을 연결 시킨 뒤에 (모든 라우터 컴포넌트는 BrowserRouter 하위에 있어야 한다) First things first, we want to connect your app to the browser's URL: import BrowserRouter and render it around your whole app. , Add Some Routes 자 이제 이 되어있으므로 URL에 /를 입력하면 컴포넌트로 화면 전환이 일어난다 Add Some Links nav li ul 의 패턴에서 a href와 같은 역할. 사용법은 아래와 같다. to 뒤에 이동한 url을 넣어주면 된다. 자 이제 works..

화면간 인자전달에 사용 기본 형식은 다음과 같다 navagate(이동할 url, 전달할 인자) url은 url이고, 여기서 말하는 전달할 인자가 무엇이냐? 여기로 prop같은것을 전달 할 수 있다는 말이다 만약 replace 기능이 필요하다면, navigate(to, { replace: true })의 형태로 사용할 수 있다. state를 사용한다면 navigate(to, { state }) 의 형태로도 가능. to는 에서 사용한 to=''와 동일한 내용.(가고자 하는 url을 넣으면 됨) 라우터 5. 버전에서의 useHistory의 기능 중 { go, goBack, goForward }는 각각 해당 위치로, 이전으로, 다음으로 의 역할을 수행해왔는데, 이 부분도 navigate로 통일하고 index를 ..

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. ref에서 current란 무엇인가? DOM의 요소정보를 가지고 있는 값 언제 사욯하나? 1. 특정 DOM 선택하기 리액트에서는 DOM 을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다. 2. 컴포넌트 안의 변수 만들기 useRef 로 관리하는 변수는..

useState가 저장하고 있는 내부값(컴포넌트에 연결 되어있는 state)은 함수 내부가 아니라 메모리에 저장 const [cards, setCard] = useState('남자 코트 추천'); State는 변수 대신쓰는 데이터 저장공간(cards) useState를 사용해 초기화 시켜줘야 함.(문자, 숫자, array, object 다 저장 가능) 여기서 화면에 데이터를 뿌려주는 경우가 많다(객체, 배열). 객체의 경우 이를 바로 화면에 표현할 수 없다. 배열안에 들어있는 객체를 다 출력하려면? 1. 배열을 순회한다. 2. 순회하는 맵의 인자를 각각 새로만든 컴포넌트에 넣는다. 3. 새로 만든 컴포넌트에서 props의 인자로 접근하여 출력한다 4. props의 여러 인자가 올시 destructurin..