본문 바로가기

장원익 기술블로그

📺 Front End/-- react & redux & nextjs33

[리액트 Hook 사용하기] useState를 이용해서 Functional Component에 state를 관리하자 리액트에서 State를 관리하는 방법은 두 가지가 있다. Class 컴포넌트에서의 State 함수형 컴포넌트에서의 State 리액트 초심자들은 지금까지 이런 이야기를 들었을 것이다. state를 사용하기 위해서는 Class형 컴포넌트를 사용해야 한다 맞는 말이다. 하지만 리액트가 발전하면서 리액트는 클래스형 컴포넌트에 대해서 많은 생각을 하게 되었다. Class형 컴포넌트의 단점 재사용이 어렵다. 리액트의 장점은 재사용성에 있다고 본인은 생각하는데, 클래스형 컴포넌트에서는 컴포넌트 자체를 재사용 할 수는 있지만 Component class 부분적인 로직 및 API 사용이 state를 이용하는 처리에 재사용에 제약 사항들이 따르게 된다. 코드가 복잡해진다. Class형 컴포넌트를 사용하기 위해서 const.. 2020. 8. 23.

[리액트 분석하기] 리액트의 가상 Dom은 Native Dom과 비교해서 왜 빠른지에 대해서 알아보자. 사실 이 글의 제목은 리액트의 가상 돔이 아니라 모든 가상 돔은 왜 빠른지. 라고 해야 맞는 표현이다. 가상 Dom(Virtural Dom) 은 리액트만 사용하고 있는 개념이 아니라 다른 프레임워크도 사용하고 있는 개념이기 때문이다. 우리가 가상 dom을 이용해서 리액트는 처리를 한다고 알고 있는데, 도대체 왜, 어떻게, 무엇이 다른지 한 번 알아보자. Dom 우리가 가상 돔을 알기 위해서는 먼저 Dom에 대해 알아야 한다. MDN에서 Dom은 다음과 같이 정의하고 있다. 핵심은 우리가 Javascript에서 HTML에 접근할 수 있게 하는 역할이라는 것이다. 그럼 DOM의 생김새는? HTML의 구조를 문서화 해놓은 것. 쯤으로 생각해보면 돔의 모양은 아마 다음과 같을 것이다. 딱 보면 뭐가 떠오르지 않.. 2020. 7. 30.

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (3) 부제 :: react-router-dom을 이용해서 페이지 라우팅 하기 이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다. 이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다. 1부 리액트가 페이지를 라우팅 하는 방법 2부 Browser History API를 사용해서 페이지 라우팅 하기 3부 react-router-dom을 이용해서 페이지 라우팅 하기 우린 지난 시간에 Brower Histroty API를 통해서 페이지를 서버의 요청 없이 라우팅 하는.. 2020. 7. 20.

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (2) 부제 :: Broswer History API를 사용해서 페이지 라우팅 하기 이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다. 이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다. 1부 리액트가 페이지를 라우팅 하는 방법 2부 Broswer History API를 사용해서 페이지 라우팅 하기 3부 react-router-dom을 이용해서 페이지 라우팅 하기 우리는 저번 시간에 리액트가 페이지에서 어떤 식으로 라우팅 되길 원하는지? 에 대해서 잠깐 알아보았다.. 2020. 7. 20.

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (1) 부제 :: Single Page Application이 무엇이고 어떻게 리액트에서 사용할까? 이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다. 이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다. 1부 리액트가 페이지를 라우팅 하는 방법 2부 Broswer History API를 사용해서 페이지 라우팅 하기 3부 react-router-dom을 이용해서 페이지 라우팅 하기 이번 주제에 대해서 이야기를 하기 위해선 우선 페이지가 어떤 방식으로 사용자에게 보여지는지 알아야 한.. 2020. 7. 20.

[리액트 분석하기] 리액트의 핵심 JSX에 대해 알아보자. (부제 :: 리액트에서는 JSX를 어떻게 이용할까?) 우리는 지금까지 계속 리액트에 대한 핵심에 대해서 이야기를 했었다. 이제 그 리액트라는 것이 어떤 식으로 돌아가는지 확인해보자. JSX JSX는 JavascriptXML이라고 하는데, 이는 Javascript도 아니고 HTML도 아닌 것이다. 정확히는 스크립트에 확장 문법이라고 하는 것인데, 우리는 리액트로 이 JSX를 할용하여 UI를 구성할 것이다. 이렇게 말 하면 너무 어려우므로 우리가 create-react-app을 통해서 프로젝트를 생성했다고 가정하고, 해당 코드에서 JSX란 무엇인지 보이겠다. 코드로 봐보자 우리의 프로젝트에서 Index.js에 있는 코드를 한 번 봐보자. ReactDOM.render();라는 구문에서 우리는 JSX를 사용할 것이다. 원래 코드를 지워보고 다음과 같이 구성해보자... 2020. 7. 20.

이전 1 2 3 4 5 6 다음

티스토리툴바