코드사냥꾼의 전리품

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념입니다. 예를 들어, 클래스 컴포넌트에서만 사용 가능했던 state를 훅(hook)을 이용해 함수형 component에서도 useState를 이용해서 상태 변수를 선언할 수 있습니다. 또한, useEffect를 통해 리액트 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프 사이클을 관리할 수 있습니다. useEffect 기능 - componentDidMount, componentDidUpdate 수행 useEffect는 컴포넌트 안에서 state, props에 접근이..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 생활코딩을 통해 리액트의 기초를 배우고, 더 심화된 벨로퍼트님의 강의를 듣는 과정에서 클래스형 컴포넌트와 함수형 컴포넌트를 아주 가볍게 배워서 좀 더 확실하게 짚고 넘어가고 싶었다. 함수형 컴포넌트는 '단순히 값을 전달 주고 받는 역할을 할 때 사용한다'라고 설명을 들었기 때문이다. 해당 설명으로는 무언가 충족이 되지 않았다. 다행히 이고잉님이 두 컴포넌트를 비교해서 구현하는 강의를 올려주셔서 쉽게 공부할 수 있었다. (내가 생각하는 이상적인 개발자의 모습을 갖춘 분😥😛.. 일면식도 없지만 항상 감사함을 느끼고 있다.) 리액트를 조금이라도 공부한 사람들은 함수형과 클래스형에 대해 아주 많이 들어봤을 것이다. 특히,..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터 삭제하기 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거하기 위해서는, 여러가지 방법이 있을 수 있다. 먼저 자바스크립트 배열을 가지고 연습해보자. const arr = [1, 2, 3, 4, 5]; arr 배열에서 3을 제거해보자. 기존의 배열은 그대로 유지하고 새 배열을 만들어서 3을 제외시키겠다. 첫번째 방법은 slice와 concat을 이용하는 것이다. 3을 기준으로 좌측의 배열과 우측의 배열을 서로 합쳐주는 것이다. array.slice(0,2).concat(array.slice(3,5)) //[1, 2, 4, 5] 배열 전개 연산자(...)를 사용하면 다음과 같이 구현할 수도 ..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터를 추가해보자 App 컴포넌트 state에 information이라는 배열을 만들고, 그 안에 샘플 데이터 두 개를 추가할 것이다. 각 전화번호는 다음과 같은 형식으로 담긴다. { id: 0, name: '이름', phone: '010-0000-0000' } 여기서 id는 각 데이터를 식별하기 위해 사용되는 고유값이다. 수정 및 삭제 기능을 구현할 때 필요하다. 그리고 id 값은 데이터를 추가할 때마다 증가해야 하기 때문에 +1씩 더해줄 것이다. // src/App.js import React, { Component } from 'react'; import PhoneForm from './com..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째, 입력받는 컴포넌트 생성 먼저 만들 컴포넌트는 PhoneForm이다. 해당 컴포넌트에서 사용자의 이름과 전화번호를 입력받는다. 우선, src 디렉토리 내부에 'components'라는 하위 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다. // src/components/PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.valu..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 두 번째 Update API에 이어 마지막 Unmount API에 대해 알아보도록 하겠다. 컴포넌트의 mount가 해제될 때 관여하는 Unmount api 컴포넌트가 해제될 때 딱 하나의 메소드가 호출된다. componentWillUnmount 자식 컴포넌트에서 사용하며 등록했던 이벤트, 네트워크 요청 취소, 구독 해제 등의 정리 작업을 수행한다. 추가) 라이프 사이클을 활용한 에러 잡아내기 componentDidCatch 사전에 예외처리를 하지 않은 에러가 발생했을 때 해당 메소드를 사용하여 사용자에게 에러가 발생했다고 알려주는 화면을 보여줄 수 있다. 해당 메소드는 에러가 발생할 수 있는 자식 컴..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째 Mount API에 이어 Update API에 대해 알아보도록 하겠다. Props 또는 State가 변경될 때 관여하는 Update api static getDerivedStateFromProps Mount api와 같이 걸쳐져 있는 부분이다. 자세한 사항은 이전에 정리한 Mount API에서 확인할 수 있다. shouldComponentUpdate 리액트에서는 변화가 발생하는 부분만 업데이트해서 브라우저에 렌더링 할 수 있다. 따라서 렌더링 작업을 최적화하기 위해 사용하는 메소드이다. 자세한 내용은 이전에 정리한 이 곳에서 확인할 수 있다. getSnapshotBeforeUpdate ren..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 예전에는 각종 프레임워크의 라이프 사이클(=생명주기)의 개념만 이해하기 급했고, 실제 코딩하면서 사용할 생각은 하지 않았었다. 아마 나의 무지함 때문에 적절하게 사용하지 못했을 수도 있었을 것이고, 유용하고 좋은 기능이 있어도 그동안 진행했던 프로젝트에서는 필요 없었기 때문일 수도 있다. 라이프사이클 API에 대해 정확히 배운 것을 정리해서 이후 개인 프로젝트 진행 시 참고해야겠다. 우선, 전체적인 리액트의 라이프사이클은 다음과 같이 크게 Mount, Updating, Unmount 3가지로 나뉜다. 컴포넌트가 처음 실행될 때 관여하는 Mount api constructor(props) 컴포넌트가 새..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 기능을 구현하다보면 값의 변형이 거의 없는 요소가 호출되는 불필요한 경우가 있다. 이런 경우 렌더링 성능이 떨어지게 되므로 좋지 않다. 따라서, 조건을 걸고 특정한 경우에만 호출 되도록 shouldComponentUpdate()를 사용한다. 해당 메소드는 오직 성능 최적화를 위해서만 사용한다. shouldComponentUpdate(newProps, newState) 해당 메소드의 기본값은 true이다. 조건을 통해 false로 지정하여 특정 경우에 호출되지 않도록 설정하면 된다. 우선, 위 메소드를 적용하기 전을 살펴보자 관리자 도구를 보면 홈페이지의 네비게이션 역할을 하는 TOC 컴포넌트의 렌더 함수도..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 여러가지 컴포넌트 이벤트 중, 목차의 요소를 클릭하면 해당 요소의 내용을 출력하는 이벤트를 만들어볼 것이다. e.target 속성과 bind 두 가지 방식을 사용해서 구현해 볼 것이다. e.target 속성 이용 // App.js 파일 내 목차 구현 부분만 명시 return ( ... ... ... ); // NAV.js // 실제 목차 로직 컴포넌트 바인드(bind) 이용 // App.js 파일 내 목차 구현 부분만 명시 return ( ... ... ... ); // NAV.js // 실제 목차 로직 컴포넌트