뫙뭉

State, 변수의 상태관리 리액트에서는 변화하는 값에 대해 클래스형 컴포넌트에서 state를 이용하여 값을 관리하였다. 함수형 컴포넌트에서는 원래 state를 관리할 수 없었기에 state를 사용할 경우 클래스형 컴포넌트를 선택적으로 사용하였는데 이러한 부분을 개선하기 위해 만들어진 기술이 Hooks. state뿐만 아니라 Life-Cycle-Method 의 사용에도 갖고 있었던 문제점을 리액트 16.8에서 Hooks라는 개념이 도입되면서 useState, useEffect 등으로 손쉽게 함수형 컴포넌트에서도 사용이 가능하게 되었다. state를 이용하는 경우는 매우 다양하다. 간단한 예로 로딩 스피너를 들 수 있는데, 듣기에는 아주 단순해 보이는 이런 경우에도 state로 관리할 수 있다. API 호..

본격적인 리액트 사용이제 필요한 데이터를 받아오는 법은 알았겠다. 본격적으로 리액트라는 것에 대해서 적어보려 한다.리액트, React JS는 최근 많은 기업들이 사용하고 있는 자바스크립트의 대표적인 라이브러리이다.리액트는 페이스북에서 만든 Javascript 라이브러리이며 특징으로는 크게 2가지를 들 수 있다. 리액트의 특징1. SPA를 구현하는 데에 용이하다.2. 모듈형 개발을 기본으로 한다.3. 활성화 된 커뮤니티 여기서 SPA(Single Page Application)란 페이지를 이동할 때마다 서버에서 데이터를 새로 받아오는 것이 아니라 우선 Vitrual DOM을 생성 한 뒤 DOM과 비교해 변경되는 곳만 부분적으로 리랜더링을 하기 때문에 웹페이지의 사용성에 도움을 준다. 쉽게 말해 모바일 어플..

해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글에서 오픈 API에 대해 간단히 소개해 보았다. 현재 개발되어있는 여러 기능들을 사용할 수 있게 공개해 놓은 오픈 API. 프론트엔드 개발을 하다 보면 API를 이용하게 되는 경우가 굉장히 많을 것이다. 그렇다면 실질적으로 이용하는 방법은 어떻게 될까? 그것에 대해 알아보기 전에 우선 통신의 종류에 관한 이야기부터 시작해보자. 동기와 비동기 통신 통신의 종류에는 두가지가 있다. 동기(Syncronous) 통신과 비동기(Asyncronous) 통신이 그것이다. 이름에서부터 알 수 있듯이 두 통신방식의 가장 큰 차이점은 ..

axios를 통한 오픈 API 사용방법에 관한 정보는 다음 글을 참고해주세요 https://mwangmoong.tistory.com/8 React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 5 ( axios 통신) 해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글 mwangmoong.tistory.com 오픈 API를 사용해보자 오늘은 API 사용기에 대해 적어보려 한다. 현재 내가 만들고 있는 프로젝트는 유튜브, 네이버 검색 API를 이용한 레시피 찾아주기 기능이다. 그전에 우선 API가 무엇인지 간단히 집고 넘어가 보자 내가 이해한 API API..

Git을 사용해 버전 관리를 해보자! 이전 게시글에서 자동완성 기능을 만들어 보았는데 일부분 기능 구현이 되었으니 Git을 사용해 버전 관리를 해보려 한다. Git이란 무엇이냐... 분산 버전 관리 시스템중 하나인데 이것에 대해서는 인터넷에 이미 굉장히 많은 글들이 친절히 알려주고 있으니 생략하도록 하겠다. 검색을 해 보시길 권장드림. 그래도 검색을 하기 귀찮아하시는 분들을 위해... 내가 공부할 때 자주 보는 드림코딩 채널의 Git에 관련된 링크를 남겨 놓도록 하겠다. https://www.youtube.com/watch?v=lPrxhA4PLoA&t=29s - Git, Github이 무엇일까. https://www.youtube.com/watch?v=Z9dvM7qgN9s&t=2378s - Git 초기 ..

자동완성 기능을 만들어보자! 전에 소개한 아이디어의 중요한 기능 중 하나가 자동완성 기능이었다. 여러 식재료의 이름들을 샘플로 기본적으로 주고, 검색창에 문자를 입력할 때마다 일치하는 재료만 보이게 하는 것이 목표이다. 내가 하면서 고민해야 될 부분은 다음과 같았다. - 모든 아이템은 처음에 보여지는 상태여야 함. - 타자가 한글자씩 입력 될 때마다 일치하는 항목들만 보여야 함. 시행착오 내가 처음 고민했던 방법은 다음과 같다. 미리 만들어 놓은 식재료 data를 받아온다. className에 화면에 보여질 재료들에 active를 부여하여 목록생성 onChange 이벤트를 통해 input에 값이 입력되면 모든 아이템에 active를 지우고 filter해서 active를 다시 부여하면 일치 항목만 남아 있..