Hello_coding

리액트로 개발을 하다 보면 늘 만나는 key 에러 ,,, 요번에 만난 에러는 TodoList를 만들던 중 key값이 unique하지 않다는 내용이였다. 예전에 정리해둔 글 (아래 링크 참고) 을 참고하려 했지만, 고유의 id값을 사용할 수 없었고, 투두리스트 같은 경우 재렌더링 되더라도 데이터가 유지 되어야하는데 이 경우 재렌더링 되면 다시 id값이 처음부터 시작되는 (...) 현상 때문에 다른방법이 필요했다. https://mandelina-code.tistory.com/102 [React] 리액트 키에러 | Warning: Each child in a list should have a unique "key" prop 에러 map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 하지..

프론트엔드 개발자라는 꿈을 정하고 난 후, 최근에 제대로 된 첫번째 팀프로젝트를 완성하였다. 리액트와 Redux-toolkit, thunk를 사용하여 프로젝트를 만들었는데, 이 프로젝트를 통해 얻을 수 있는 점이 많았다. 1. React는 CSR 방식이기 때문에 초기 구동속도가 느리다. 2. 더해서 SEO에 좋지않다.. 이 문제점을 해결하고자, 프로젝트에서는 react-helmet-async라이브러리를 사용하여 페이지별로 meta태그를 설정해 주었고, 초기 구동속도를 개선하기 위하여 React.lazy()를 이용한 코드분할을 시도했었다. (하지만, 개인적으로 만든 Private,Public라우터와 꼬여서 (?) 실패하긴 했다. 이 부분은 틈틈히 생각해보는걸로....) 하지만 , 이러한 문제점을 해결하기위..

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

내가 만든 컴포넌트에 ref를 달고 싶었다. 하지만 다음과 같은 에러가 . . . Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? useRef는 알아도 forwardRef는 뭐지?! forwardRef에 대해 알아보자! 먼저 ref란 무엇인지 간략하게 말해보자. ref는 React에서 HTML엘리먼트에 접근하기 위해 사용한다. (마치 자바스크립트의 셀렉터처럼 . . . ) 더 자세한 useRef를 알고싶다면 👇 https://mandelina-code.tistory.com/86 [React - Hook] useRef가 뭘까..

열심히 기능 구현중, props를 전달하는 과정에서 error가 발생했다. 찾아보니 ESLint의 유효성 검사에서 Type에 대한 내용이 누락되어서 저런 에러가 발생한 것 같았다. 해결방법 1 ) propTypes정의하기 먼저 prop-types을 설치한다. npm i prop-types 그 후 , 에러가 발생되는 컴포넌트에 파라미터(props로 받은 값들) 값들의 Type을 지정해준다. EmailInput.propTypes = { //value , onChange는 props로 받은 값들 value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, }; 참고 : https://ko.reactjs.org/docs/typechecking..

프로젝트를 준비하며, 폴더구조를 짜던중 디자인패턴 얘기가 나왔다. 리액트에 적용시킬 디자인 패턴을 고려하는 중, 최근에 자주 들리던 (?) 아토믹 패턴에 대해 알아보기로 했다. Atomic Design이란? - 화학에서 용어를 빌린 개념을 웹에 적용한 패턴이다. - 웹사이트에서의 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 퍼즐을 조립하듯 사용하여 상위 컴포넌트를 만드는 패턴이다. Atomic Design의 5단계 1. Atoms 원자(Atoms)은 인터페이스를 구성하는 기본 블록역할을 한다. 즉, 디자인과 기능의 최소단위라고 볼 수 있다. ex ) Label , Text ,Button , Icon , input 등 basic HTML elements 2. Molecules 분자(Mol..

리액트를 공부하며 자연스레 서버사이드렌더링, 클라이언트사이드 렌더링에 대해 알게 되었다. 대략적으로는 알고 있지만.. 더 자세히 알기위해 포스팅을 하기로 했다! 이 둘의 차이점은 결국 단어에서도 나와있지만 어디서 렌더링을 하느냐! 이다. CSR (Clinet Side Rendering) ? - 클라이언트 사이드 렌더링은 SPA가 유명해지고 , 사용자들의 컴퓨터 성능향상 및 자바스크립트의 표준화로 본격적으로 함께 나온애다. - CSR은 서버에서 전체 페이지를 한번 렌더링 하여 보여주고, 사용자가 요청할때 마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 재렌더링 하는 방식이다. [ CSR 방식 로직 ] 1. 서버에서 HTML파일을 클라이언트에 보내주면 CSR에서 사용하는 HTML파일은 단순히 아래와 같..

기존은 컴포넌트의 props를 통한 데이터 전달이 이루어 진다. 하지만 여러 컴포넌트에 거쳐 자주 사용되는 데이터( 예 : 로그인여부, 프로필정보)의 경우 기존방식은 코드가 복잡하고 불편해진다. 이것을 해결하기위한 방법이 바로 Context이다. Context에 대해 알아보자! Context ? - 컴포넌트 트리를 통해 부모가 자식을 통해 전달해주는것이 아닌 곧바로 컴포넌트로 데이터 전달한다. - 코드가 깔끔해지고, 데이터를 한곳에서 관리하기 때문에 디버깅도 유리하다. 언제 context를 사용할까 ?? - 여러개의 component들이 접근해야하는 데이터에 사용 ex ) 로그인여부 , 정보 ui테마 , 현재언어 등 .. 사용하기전에 고려할점 - component와 context가 연동되면 재사용성이 떨..

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

1. 깃헙 페이지 만들고 2. package.json에 밑에 코드 추가하고 { "homepage":"여러분 github page url", ... } 3. npm run build 해준다음 4. build안의 파일을 그대로 올렸는데도 배포시 흰화면이 떳다.. (이걸로 며칠을 고생했는지...) 구글링과 팀원분들을 총동원해 알게 된 사실 .. (사랑해여 팀원분들. . . ) 1. build파일의 index.html 경로가 잘못되어있다. 저 1번과 2번 경로가 ./static이 되어야한다. (경로가 이상하게 되어 있었다..) 2. npx create-react-app my-app 로 react 프로젝트를 생성하면 .gitignore에 /build 파일이 적어져있다. (build파일이 안올라가서 드래그앤 드롭으..