클로저함수와 그 함수가 선언될 당시의 렉시컬 환경(선언 됬을때의 렉시컬 환경)의 조합.함수가 외부 스코프 변수를 참조 할 수 있고 외부 함수의 실행이 끝나도 변수에 접근 할 수 있다. 바닐라 JavaScript에서 클로저 이슈for (var i = 0; i 반복문을 돌며 setTimeout 호출 시 콘솔에 i를 출력하는 예시 코드다.결과가 어떻게 나올까?클로저를 모르면 0,1,2가 출력된다고 볼 수 있다.하지만 클로저는 외부 스코프의 변수를 참조하기 때문에 setTimeout 함수가 1초 후 실행됬을때는 i는 이미 3가 되어 콘솔에는 3이 출력된다.var는 함수 스코프이기 때문에 반복문을 돌며 새로운 i를 생성하지 않고 하나의 i로 공유가 되기 때문이다. 리액트에서의 클로저자바스크립트에서는 var를 사용..

요즘 현대사회에서는 스마트폰이 필수다. 나만해도 눈뜨면 인스타그램을 들어가서 지인들의 최신소식을 확인한다던지 네이버앱을 들어가서 뉴스를 본다. 우리 일상속에서 가장 가깝게 마주하고 있는 부분이 스마트폰 -> 앱 -> 사용자인터페이스 UI로 연결된다. 리액트 공식홈페이지에 가보면 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 쓰여져있다. 말 그대로 리액트는 UI를 개발하는데 원할하도록 도움을 주는 라이브러리라는 것이다. 자바스크립트로 UI를 제어하려면 굉장히 복잡하고 효율이 떨어지는 작업을 하게 된다. 그런 단점을 리액트가 도와준다! 어떻게 도와주는지 알아보자. ✅ 실제 돔과 가상돔(Virtual DOM) UI는 사용자가 버튼을 클릭한다던지 새로운 검색결과를 보여줘야한다 던지 어떠한 ..

컴포넌트를 props bg결과 값에 따라 노출하려고 수정해놨떠니 아래와 같은 오류가 났다.. 왓더?? 왜안되지..? 분명 props값을 true로 하면 컴포넌트 노출이 가능했는데 뭐야 진짜ㅡㅡ!! 바로 써치 ㄱㄱ 대충 번역해보니 리액트 엘리먼트 인자에 값이 null을 던졌다 웅앵~~~ 🤔 찾아보니 공식문서에 해결법이 나와있었음 https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering Conditional Rendering – React A JavaScript library for building user interfaces reactjs.org 드문경우지만 컴포넌트가 다른컴포넌트에 렌더링 되었을때 숨기기를..

👉React hooks란..? 기존 클래스컴포넌트에서 사용하던 리액트 기능들을 함수컴포넌트에서도 사용할 수 있게 된것 이에요. 함수컴포넌트에서도 state기능을 사용할수 있다! 그걸 hooks라고 불러줘! 이런것이죠 //function components function App() { return ( 함수컴포넌트 ); } //hooks const App() => { const [count, setCount] = useState(0); return ( hooks ); } hooks 도입전에 함수컴포넌트는 class 컴포넌트에서 사용하는 state나 라이프사이클을 사용할수 없었어요 return만 가능했죠 그래서 hooks 가 생기면서 함수컴포넌트로도 state와 라이프사이클을 사용할수 있게되었어요 📢우리는 ..

styled components를 이번에 배워서 프로젝트를 만드는 도중 class가 바뀔때 style을 변경하는 것을 단순히 style을 추가하면 되는줄 알았는데 props를 이용해서 할수 있다는 것을 알게되었다. //components 안녕하세요. //style & aside{ position:fixed; right:0; top:0; z-index:9; width:50vw; height:100%; padding:2rem; background:#fff; transform:translateX(100%); transition:all .5s ease; box-sizing:border-box; &.is--open{ transform:translateX(0); } loginOn state가 바뀌면 클래스 is--..

함수형 컴포넌트에서 componentDidMount,componentDidUpdate,componentWillUnmount 의 라이프사이클을 대신해 사용 할 수 있는것이 바로 useEffect 입니다. 그럼 어떻게 useEffect를 사용하는지 확인해봅시다 1. componentDidMount, componentDidUpdate hook const Messege = ()=>{ const [message, setMessage] = useState('안녕하세요'); useEffect(() => { console.log('useEffect 실행'); setTimeout(() => { setMessage("만나서 반가웠어요"); }, 3000) },[]) // 빈 배열 return( {message} ) } u..