Hello_coding

개발중 , useEffect를 useLayoutEffect로 바꾸었더니 해결되는 현상을 경험했다. useLayoutEffect를 들어보긴 했지만.. 정확한 개념을 알고자 정리해보자! useEffect - 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용한다. - Side effect를 수행하기 위한 Hook이다. useEffect에 대해서는 이전 글에서 자세히 정리해두었으니 아래 링크를 참고하도록 .. https://mandelina-code.tistory.com/80 [React - Hook] useEffect을 사용해 시계만들기 useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook reac..

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

애플리케이션을 만들때 , 서버의 API를 호출하여 사용하는 경우 네트워크 송수신 과정에서 시간이 걸린다. 따라서 응답을 받을 때까지 기다렸다가 전달 받아서 처리한다. 이때 만약 동기적으로 처리한다면 ? 요청이 끝날때 까지 다른 일을 할 수 없기때문에 효율적이지 않을것이다. 따라서 이과정을 비동기적으로 처리하게 된다! Q. 비동기에 대해 더 자세히 알고 싶다면? https://mandelina-code.tistory.com/67 [JS] Promise (feat. 동기,비동기가 뭘까?) Promise를 들어가기 앞서 , 우리가 알아야할 것은 비동기 이해이다. 비동기 - 비동기 실행이란 순차적으로 수행이 완료되면 다음수행이 실행되는 것이 아니라 동작이 완료되지 않아도 다음코드가 mandelina-code.t..

기존은 컴포넌트의 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를 사용한 ..

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

리액트에서는 CSS를 어떻게 사용해야 할까? 리액트에서 컴포넌트를 스타일링하는 방식은 크게 4가지가 있다. 1. 일반CSS : CSS파일을 import하여 사용 2. SaSS : CSS 전처리기를 이용 3. CSS Module : 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지 4. styled-components : 자바스크립트 파일안에 스타일을 선언 이중에서 우리는 styled-components에 대해 알아보자! styled-components - 자바스크립트 파일안에 스타일을 선언하는 방식이다. - CSS-in-JS 라이브러리중 개발자들이 가장 선호한다. - Tagged 템플릿 리터럴 문법을 사용한다. - props 값으로 전달해주는 값을 쉽게 스타일에 적..

useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook react에서의 Side effect란? → 서버에서 데이터를 불러오거나, 수동으로 Dom을 변경하는 등의 활동 → 즉 해석을 영향이라고 하면된다, - 사용법 useEffect(이펙트 함수()=>{ //작업.. return () =>{ //컴포넌트가 언마운트될 때, 또는 다음 렌더링시 불릴 useEffect가 실행되기 이전에 실행 } },[의존성 배열]); 의존성 배열? 말 그대로 effect가 의존하는 배열! 이 배열이 변경되면 effect 함수가 실행된다. Q1 .의존성배열을 생략하면 ? - 컴포넌트가 업데이트 될 때마다 호출 Q2. 이펙트 함수를..

Hook을 공부하며 useState를 사용중 State에 대해 좀 더 자세히 알고 싶어 졌다. react에서 말하는 State는 무엇인지 알아보자 ! State ? - 리액트 Component의 상태 ( 이때 말하는 상태는 리액트 Component의 데이터와 가까운 말이다.) 즉, 리액트 Component의 변경가능한 데이터를 State라고 한다. - state는 렌더링이나 데이터 흐름에 사용되는 값만 포함해야한다. ( 그렇지 않으면 불필요한 재렌더링이 발생하여 성능저하가 발생한다. ) - state는 JavaScript 객체이다. - state는 직접 수정하지 않는다 ! (setState 함수를 통해 사용해야한다.) - state가 변경되어 재렌더링 하는 과정에서 Virtual DOM이 생성된다. 이때..

버튼을 누를때마다 숫자가 증가하게 보이고 싶은데 ... 어떻게 해야하지 ...? Hook을 알기위해 알아야 할 내용 컴포넌트에는 두가지 종류가 있다. 1. Class Compoent 2. Fuction Compoent Class Compoent는 ? - 생성자에서 State를 정의한다 - setState() 함수를 통해 state를 업데이트 한다. - 컴포넌트의 생명주기 함수가 명확히 정의되어 있어 가져다 사용하면 된다. Q. state가 무엇인지 궁금하다면? https://mandelina-code.tistory.com/79 [React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까? Hook을 공부하며 useState를 사용중 State에 대해 좀 더 자세히 알고 싶어 졌다. r..