Hello_coding

map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 하지만 이 문제는 이미 알고 있던 부분이였다. react에서는 key를 통해 기존트리와 이후 트리의 자식들이 일치하는지 확인하기때문에, 효율적으로 렌더링 하기 위해선 key를 사용해야한다! 더해서 , key를 인덱스로 사용할 수 도있는데 인덱스 값은 재배열이 될 경우 비효율적으로 동작한다. 따라서 index를 key로 사용하는것은 지양하자! 아는 에러가 나와서 기분좋게 해결하려고 내 코드를 봤다 ^_^ return ( {followpost && followpost.map((post) => { return ( // 여기... key있는데.. {post.itemName} {post.link} {post.updatedAt.substri..

리덕스 (Redux) 란? - 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이다. - 주의해야 할 점은 , react만을 위한 라이브러리는 아니다. - useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리가 가능하다. - 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 값을 전달, 업데이트 할 수 있다. Redux flow는 어떻게 될까? 1. 하나의 중앙 데이터(state) store을 갖는다. 2. 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만든다. 3. dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을..

useRef 란? - Reference를 사용하기 위한 Hook Reference ? 특정 컴포넌트에 접근할 수 있는 객체 사용법 const ref = useRef(초깃값); 특징 - useRef Hook은 Reference object를 반환한다. { current : value } - current란 현재 참조하고 있는 Element이다. - Reference object는 수정이 가능하다. - 반환된 ref는 전 생애주기를 통해 유지된다. (즉, 컴포넌트가 계속 렌더링 되더라도 unmount 되기 전까진 값을 유지한다. ) - useRef Hook은 내부의 데이터가 변경되더라도 별도로 알리지 않는다. (즉, current 속성을 변경한다고 재렌더링이 되지 않는다. ) 정리 - useRef를 사용한 ..

리액트 홈페이지를 클론하려던 중 라우팅방법을 이해하기 위한 SPA에 대한 지식이 부족한것 같아 알아보게 되었다. SPA ? - 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. - 뷰 렌더링을 사용자의 브라우저가 담당하게 하고 , 우선 애플리케이션을 브라우저에 불러와 실행시킨 후 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. - 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용 Q. 왜사용해요 ? 기존페이지는 다른페이지로 이동할 때마다 새로운 html을 받아오고 , 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 하지만 매번 새로운 화면을 보여주면 성능상의 문제가 발생할..