FrontEngineer JungBam

useRef로 작업하는 것이 state로도 작업하는 것과 어떤 것이 다를까? 리렌더링(클라이언트의 작업과 동기화) state로 작업을 하게 되면 리액트가 액션에 대한 관리를 하게 된다. 즉 이말은 setState를 통한 변화가 있을 때마다 리렌더링하는 과정을 거친다는 말이다. 검색창의 검색단어 자동완성 기능이나 input에 글을 작성할 때 그 글을 토대로 검색결과를 가져오는 것은 state를 이용하면 쉽게 구현할 수 있는 기능이다. 그렇다면 useRef는 완전 쓸모없는 기능일까? 반대로 리렌더링하지 않고 DOM요소의 속성을 조회하거나 수정할때에는 오히려 useRef가 유용할 수도 있다. 예를 들어 게시글의 항목의 key값을 useRef를 통해 지정하고 이를 1씩 증가하면서 key값을 제공할 수도 있고 간..

클로저 : '함수와 그 함수가 선언되었을 때의 렉시컬 환경과의 조합' ☞ 자신을 포함하고 있는 외부 함수가 생명주기를 다하더라도 해당 외부함수의 매개변수와 변수들을 접근할 수 있다. 이게 무슨 말이냐하면 지역-렉시컬 스코프라는 개념에 의해서는 변수의 생명주기는 {}에 의해 정해지는데 해당 함수가 호출되어 실행이 끝난 뒤에도 실행중인 내부함수에 의해 그 함수의 변수가 살아 있을 때 그 내부함수를 클로저라고 부른다. const add = ()=>{ let level = 1 console.log(level) level++ } // add 함수의 실행주기 die add() // 1 add() // 1 위의 예제를 보면 알 수 있듯이 add 함수의 지역-렉시컬 스코프에 따라 생명주기가 끝나면 level이라는 변수..

1. 왜 리액트 훅이 나왔나? ☞ 클래스형 컴포넌트의 복잡한 코드와 더딘 성능에도 어쩔 수 없이 이용할 수 밖에 없었던 부분을 해결하기 위해서 등장 ※ 바벨 사이트를 통한 코드 비교시 확연한 차이를 볼 수 있음.(https://babeljs.io/) 2. 원래 클래스형 컴포넌트에서만 사용되었던 부분이었던 리액트 생명주기에 대한 관리를 할 수 있게 된 것. ☞ 마운트과정(컴포넌트가 호출될 때)에서 데이터를 가져오고 API도 호출할 수 있게 됨. → useEffect 훅 : 기존 클래스형 컴포넌트에서 componentDidMount() //마운트 시// componentDidUpdate()//어떤 값이 업데이트 될 때에//componentWillUnmount()//언마운트 시//를 하나로 해결하도록 만든 것..

1. 함수 : 모듈화의 근간(어떠한 목적으로 인해 하나의 기능에 문장을 모아놓은 것) ☞ 그럼 왜 함수를 써야하지? ① 코드의 재사용 → 하나의 묶음이란 것은 유지보수의 편의성까지 제공 → 하나의 작업에 대한 획일성을 제공하고 이 점은 코드의 신뢰성을 증대 ② 정보의 구성 및 은닉 ③ 객체의 행위를 지정 → 식별자를 통한 어떠한 행위인지가 인지되어야 함.(코드의 가독성을 향상) 2. 함수라는 자식은 Function.prototype에 연결된 객체(Function.prototype은 Object.prototype에 연결됨.) 3. 함수의 구성 예약어 : function 함수의 이름 : 식별자 / 함수가 호출될 때 사용됨. - 재귀의 필요성이 없을 때에 익명함수로 작성하기도 함. 매개변수 : 함수가 호출될 ..

useEffect 훅을 이용한 마운트 관리 - 마운트(처음 렌더링 되었을 때), 언마운트(사라질 때), 업데이트 되었을 때 특정 작업을 처리하기 위하여 사용한다. useEffect 훅 생김새 : 첫번째 인자로 함수를 받고 두번째 인자로는 의존성 배열(deps)를 갖는다. useEffect(() => { 마운트 시 작업 return 언마운트 시 작업 }, []) 이 의존성 배열은 간단하게 설명하면 의존성 배열이 비워져 있으면 컴포넌트가 처음 렌더링 될때에만 useEffect 내부 함수가 동작하고 의존성 배열안에 있는 값이 늘어날 수록 안에 들어간 값이 바뀔 때마다 호출된다. deps 안에 특정 값이 있다면 언마운트 시, 값이 바뀌기 직전에도 호출된다.(console을 찍었을 때 잠깐 잠깐 값들이 undef..

모달, 사이드 드로우, 다이어로그와 같은 오버레이 관련 컴포넌트를 만들어 사용할 때 유용함. 오버레이되는 컴포넌트의 최종 HTML 위치가 root가 아닌 의도하지 않은 매우 깊숙한 곳에 위치하지 않도록 해당 오버레이가 생성되었을 때에 직관적으로 볼 수 있도록 도와주는 장치. 준비과정 1. 해당 컴포넌트 파일에 리액트 돔 임포트 import ReactDOM from 'react-dom' 2. 포털 될 실제 렌더링 되는 DOM이 되는 html파일에 포탈을 탈 위치 그려주기. 3. 포털로 이동시킬 컴포넌트 분리하기 const Backdrop = (props) => { return } ※ 같은 파일 내에 컴포넌트를 추가생성했다. 4. 리액트 포털 메소드를 사용하여 보내주기. {ReactDOM.createPort..

빈 요소로 JSX문을 반환하고자 할 때 사용. React 라이브러리에 포함되어 있어 react를 import 시켰다면 별도 작업 없이 사용이 가능함. 감싸는 역할 또는 빈 플래그로 가능 감싸는 역할

안녕 Wrapper라는 유틸 컴포넌트를 통해 props.children으로 해당 값을 그대로 넘기도록 구현.