기록하는 개발자

프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데 기록한 적은 없었던 것 같아 글을 써본다. React hooks usestate를 사용해 modal창을 만들었다. 클릭 전 화면 클릭 후 화면 폴더 구조 //App.js import React, { useEffect } from "react"; import AppRouter from "./AppRouter"; function App() { return ; } export default App; //AppRouter.tsx import React, { useState } from "react"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import Home ..

참고 : https://medium.com/@nugen/react-hooks-calling-child-component-function-from-parent-component-4ea249d00740 React Hooks-Calling Child Component Function From Parent Component In this article we’re are assuming that you are somewhat familiar with React Hooks medium.com [ 상위 컴포넌트 ] import React, { useRef } from "react"; const ParenctComponent = () => { const myRef = useRef({}); function doSomet..

지도를 사용하는 프로젝트를 하게되어 naver map api를 사용하기로 했다. api 를 처음 적용해봤기도 하고 react로 본격적인 팀프로젝트도 처음이라 쉽지 않았다. 구글링을 해도 일반 태그로 작성하는 예시는 많았지만 react에 작성하는 예시는 너무 없어서 맨땅에 헤딩하는 느낌이었다.. 아직 부족해서 코드가 지저분할지라도 동작은 하기 때문에 react 프로젝트에서 naver map을 사용하는 사람들에게 조금이라도 도움이 되길 바란다. naver map 회원가입이나 key값을 받아오는 설명은 검색하면 너무 자세히 나와있어서 생략하겠다. +) key 값은 env. 파일을 만들어 관리하자,, 나는 Home 아래와 같이 화면에 지도를 띄우고 도로명 주소를 검색하면 해당 좌표로 이동하여 화면이 줌 되고, ..

https://mingmeng030.tistory.com/216?category=1025066 컴포넌트 - 3. property Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import mingmeng030.tistory.com 앞선 위 게시물에서 상위 컴포넌트가 하위 컴포넌트에 property를 전달할 수 있음을 설명했다. 만약 하위 컴포넌트에서 전달받은 property를 변경해야 할 때는 어떻게 해야할까? property의 원본을 수정할 수 있는 함수를 하위 컴포넌트에 함께 제공하면 된다. 이러한 함수를 callback ..

react 컴포넌트 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 그렇다면 두 방식의 차이점은 무엇일까? 1. 선언 방식 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const Hello = 'hello'; return {Hello} } } export default App; 1. class 키워드가 필요하며, Component 상속을 받아야한다. 2. render() 메소드가 반드시 필요하다. 3. 함수형보다 메모리 자원을 더 많이 사용한다. 4. state, lifeCycle 관련 기능(생명주기함수)사용이 가능하다. 5. 함수형보다 메모리 자원을 더 많이 사용한다. 6..

컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(lifecycle) 이라고 한다. 이 생명주기마다 함수를 가지고 있으며, 함수를 이용해 특정 시점에 원하는 동작을 하게 만들 수 있다. 생명주기 함수는 총 8개로, react 엔진에서 자동으로 호출한다. 따라서 개발자가 임의대로 호출할 수 없다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서부터 페이지에서 사라질 때까지이다. +) 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다(함수형컴포넌트에서는 주로 Hooks를 사용한다). 컴포넌트의 생명주기는 크게 컴포넌트의 생성, 생성 완료, 갱신 완료, 소멸 완료로 구분되어진다. 컴포넌트의 생성, 생성 완료 사이를 Mount, 생성 완료와 갱신 완료 사이를 Update, 갱신 완료와 ..

property의 특징이 컴포넌트 내부에서 값을 변경할 수 없다는 점이었다면, state는 반대로 컴포넌트 내부에서 값을 변경해야 하는 경우 사용한다. state 값을 변경하거나 저장할 수 있는 객체로 보통 버튼 클릭, 값 입력 등의 이벤트와 함께 사용된다. state 사용 시 주의점 1. 반드시 생성자(constructor)에서 초기화 해야한다. 2. state 값을 변경할 때는 반드시 setState()를 사용해야한다. 3. setState()는 비동기로 처리되며 setState() 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다. state를 변경할 때 setState를 사용해야하는 이유 setState() 함수를 쓰지 않고 state를 변경하는 것이 불가능한 것은 아니다. ..

Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import React from "react"; import MyComponent from './MyComponent'; class App() extends React.Component{ render(){ return ( ); } } export default App; MyComponent에서는 name이라는 이름의 프로퍼티로 전달받은 "msg" 문자열을 render 함수에서 참조한다. 아래 코드에서 this.props.name으로 프로퍼티 값을 참조하고 있음을 확인할 수 있다. ..