React - useEffect

1. 개요 useEffect를 사용해서 리액트의 생명주기를 확인할 수 있다. 리액트 컴포넌트의 생명주기는 총 3가지가 있다. Mount : 화면에서 나타 Update : 리렌더 Unmount : 화면에서 사라짐 2. 사용 방법 useEffect도 마찬가지로 리액트의 기능이기 때문에 state와 useRef 같이 import 해준다. import React , { useEffect } from "react"; useEffect의 기본 구성은 이렇게 나타난다. useEffect(()=>{ // Callback함수 }, []);// dependency Array(의존성 배열) // 이 배열안에 들어있는 값이 변화하면 콜백 함수가 실행됨 2-1 mount 할 때만 실행 컴포넌트가 화면에 처음 나타날 때를 mou..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms

React - useRef란?

1. 개요 자바스크립트에서 DOM요소를 선택하고 싶을때 getEelementById 나 querySelector를 사용하곤 한다. 리액트에서도 마찬가지로 DOM요소를 선택하고 싶을 때는 어떻게 할까? ✅ useRef를 사용하면 된다. 2. 사용 방법 import { useRef } from "react"; state를 사용할 때와 같이 리액트의 기능이기 때문에 import해준다. const authorInput = useRef(); const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.focus(); return; } return ( ) 1. 원하는 DOM요소에 넣을 변수를 생성한다. → Ref로 생성 2. DOM요..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms

React - State란?

1. 개요 현재 리액트를 배우고 있는데 가장 기본이면서 중요한 개념인 state에 대해 개념이 잘 잡히지 않아서 기록할려고 적어본다. 내가 아는 선에서 정리한 것이므로 틀린부분이 존재할 수 있다. 개념을 배워가면서 수정하면서 기록할 예정이다. 2. 사용 방법 import { useState } from "react"; state를 사용하기 전에 먼저 리액트로부터 모듈을 import 해야 한다. const [state,setState] = useState(초기값) state : 현재 상태 setState : 현재 상태를 변화시키는 함수 useState : state의 초기값 3. 사용 예시 import { useState } from "react"; const [state,setState] = useSta..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms

[작품] - 메뉴 별로 가게 리스트 띄우기

1. 개요 저번에는 지역 선택별로 가게 리스트를 띄웠다면 이제는 메뉴별로 가게를 띄우게 할 예정이다. 사이트 구조상 지역을 선택하고 메뉴 선택을 할 수 있게 만들었기 때문에 지역 필터가 적용된 가운데 메뉴필터도 적용이 되어야 했다. 물론 아무 지역을 선택하지 않아도 메뉴 필터는 적용이 되어야 한다는 점도 적용해야 했다. 구현한 영상 잘 작동하는 모습을 볼 수 있다. ㅎㅎ 2. 구현하기(지역 필터 안했을 때) 2-1 각각의 메뉴들을 클릭했을 때의 이벤트 주기 const sortedMenu = document.querySelectorAll("#sortedMenu"); sortedMenu.forEach((el) => { el.addEventListener("click", function () { )}; )};..

• format_list_bulleted 졸업작품
• · 2023. 5. 17.
• textsms

[작품] - 지역 선택 Select Box만들기(2)

1. 개요 저번에 만든 지역선택 Box는 모형만 만든 것이라면 이번에는 실제 지역을 선택하면 선택한 지역만 나오게 만들 것이다. 예를 들어 서울을 선택하면 서울지역 식당만 나오게 하고 서울,수원등 여러군데를 선택하게 되면 선택된 모든 식당들이 나오게 할 예정이다. 위 사진은 강남구, 수원시를 선택한 모습이다. 이렇게 한개 이상의 지역을 선택했을 경우는 처음 선택한 곳+ 외 ~~ 곳 이렇게 만들었다. 지역을 선택하고 조회버튼을 누르면 해당 지역이 나온다. + 초기화 버튼을 누르면 선택된 모든 체크가 해제되고 그 상태에서 조회를 누르면 초기에 나온 모든 식당들이 나온다. 2. 구현하기 2-1 체크된 box들은 배열에 넣기 const checkbox = document.getElementsByName("reg..

• format_list_bulleted 졸업작품
• · 2023. 5. 14.
• textsms

[자바스크립트] - this란?

1️⃣ this란 무엇일까? 자바스크립트를 사용할 때 this라는 개념이 많이 사용된다. 이 때마다 개념이 헷갈려서 잘 적용이 된다 싶으면 넘어가곤 했다. 그래서 이번엔 개념을 확실히 잡아야 겠다고 생각했다. MDN에서 보면 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다고 써져있다. 만약 호출한 놈이 없을 때는 기본값으로 window 객체가 반환된다. // 웹 브라우저에서 window 객체가 전역 객체임 console.log(this === window); // true 2️⃣ this는 호출한 놈 대부분의 경우 this의 값은 호출한 방법에 의해 결정된다. function printThis() { console.log(this); } printThis(); // window 객체 l..

• format_list_bulleted Javascript
• · 2023. 5. 6.
• textsms