코딩 일기장

react에서 함수형 컴포넌트를 사용할 때 life cycle을 useEffect hook을 사용해서 관리한다. 그 중에서 useEffect에 빈 array []를 dependency로 설정해주면 componentDidMount와 같은 역할을 하게 된다. useEffect(() => { readApplicationForms(); },[]); 이 코드는 처음 component들이 mount 되었을 때, readApplicationForms() 함수를 실행한다는 것을 의미한다. 그런데 실행했을 때 다음과 같은 warning을 확인할 수 있다. 만약 componentDidMount를 대신하는 부분이 아니였다면 dependency에 연관된 state 변수를 넣어줬겠지만, 컴포넌트가 마운트 될 때 한 번만 실행하..

보호되어 있는 글입니다.

자식에서 부모 컴포넌트로 이번 프로젝트에서 사용했던 방식 import React, { useState } from 'react'; function App() { return ( ); }; const Parent = (props) => { const [data, setData] = useState("initial data"); ... panToNaver(lat, lng, zoom) { this.setState({ center: { lat: lat, lng: lng }, zoom: zoom, circlePosition: { lat: lat, lng: lng } }); } ... return ( {data} ); }; const Child = (props) => { return ( props.panToNave..

javascript map exercise example1 friends = ["dal", "mark", "lynn", "japan guy"] friends.map(current => { console.log(current); return 0 }) output : 각 element가 console에 찍히고, [0,0,0,0]이 리턴됨 example2 friends = ["dal", "mark", "lynn", "japan guy"] friends.map(function(friend){ return friend+" heart"; }) 각 item에 function을 적용하고 array를 반환함 example3 import React from 'react'; function Food({ name , pict..

** 노마드코더님의 강의를 보고 작성하였습니다! ** 리액트 자바스크립트 기반이므로 프레임워크가 사라진다고 해도 자바스크립트 고수가 될 수 있음 패키지 종류 많고 문서 잘 정리되어 있고 빠르고 점점 더 많은 사람들이 사용하고 있음 대부분의 큰 회사들이 사용함 멋진 자바스크립트 개발자로 만들어줌 처음 시작 node js 설치 npm 설치 npx 설치 "create-react-app 프로젝트이름" 리액트 동작 원리 자바스크립트와 함께 HTML안에 들어갈 element들을 생성하고, html에 밀어넣음! import App from './App'; ReactDOM.render(, document.getElementById('root')); // App.js에서 반환한 element를 id root를 가진 애한..