elevne's Study Note

/src/containers 디렉토리에 CounterContainer 컴포넌트를 작성한다. 이 컴포넌트에서는 react-redux 에서 제공하는 connect 함수를 사용하게 된다. connect 함수는 아래와 같은 형식으로 사용된다. connect(mapStateToProps, mapDispatchToProps)(연동할컴포넌트) 위 connect 함수에서 mapStateToProps 는 Redux 스토어 안의 상태를 컴포넌트의 props 로 넘겨주기 위해 설정하는 함수이고, mapDispatchToProps 는 액션 생성함수를 컴포넌트의 props 로 넘겨주기 위해 사용하는 함수이다. 이를 활용한 CounterContainer 컴포넌트는 아래와 같이 작성된다. import { connect } from..

React 에서는 Redux 라는 것을 사용하여 애플리케이션 상태를 관리할 수 있다. 소규모 프로젝트에서는 Component 의 state 를 사용하는 것으로 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있다고 한다. Redux 를 이용하면 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 Component 파일과 별개로 관리할 수 있으므로 코드를 유지보수하는데에도 도움이 된다. 또, 여러 컴포넌트에서 동일한 상태로 공유해야 할 때도 매우 유용하고, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다고 한다. 우선 Redux 를 사용해보기 위해 새로운 React 프로젝트를 생성해주었다. 만든 프로젝트 폴더 내로 cd 하고 Redux, react-redux 라이..

To-Do App 을 만들어보는 실습을 진행해보았다. 간단한 To-Do App 을 만들기 위해서는 아래 4 개의 Component 를 만들 필요가 있다. TodoTemplate: 화면을 가운데에 정렬, 일정 전시 TodoInsert: 새로운 일정 입력, 추가 TodoListItem: 각 할 일 항목에 대한 정보 TodoList: Todos 배열을 props 로 받아와 TodoListItem 컴포넌트로 변환 우선 기본적인 틀이 될 TodoTemplate.js, .scss 파일을 아래와 같이 작성해준다. TodoTemplate.scss .TodoTemplate { width: 512px; margin-left: auto; margin-right: auto; margin-top: 6rem; border-rad..

Hooks 는 React 에서 함수 Component 에 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해준다. React 내장 Hooks 를 사용할 수도 있고, Custom Hooks 를 만들어서 사용해볼 수도 있다. 1. useState useState 는 가장 기본적인 Hook 으로, state 를 함수형 컴포넌트에 가지게 해주는 것이다. useState 함수는 한 번에 하나의 상태 값만 관리할 수 있기 때문에 컴포넌트에서 여러 개의 상태값을 관리해야 한다면 useState 를 여러 번 사용해야 한다. 아래와 같이 간단하게 +/- 버튼을 만들어줄 수 있게 해준다. import { useState } from "react"; const Coun..

프로젝트 페이지 개발 도중, a 태그로 감싸진 img 태그의 절반가량이 클릭이 안먹히는 현상이 발견되었다. 개발자도구를 사용해가며 살펴보니 클릭이 안먹히는 부분이 다른 div 태그와 겹쳐있는 것을 확인할 수 있었다. 겹쳐서 onclick 등의 이벤트가 발생하지 않는 문제를 해결하는 방법을 찾아보다 z-index 에 대해서 공부하게 되었다. z-index 는 css 에서 사용할 수 있는 속성인데, 겹쳐있는 두 개 이상의 element 들이 있을 때 이 값을 설정함으로써 요소들의 수직 위치를 설정해줄 수 있다. z-index 값이 클 수록 더 앞으로 오게 되는 것이다. 아래와 같은 코드가 있을 때 .top-layer{ z-index:3; } .middle-layer{ z-index:2; } .bottom-l..

프로젝트를 진행하며 한 페이지에 많은 양의 체크박스가 있을 때 전체선택 및 전체선택해제 기능을 넣을 필요가 있었다. 우선 전체선택은 아래와 같이 작성해주었다. let selectAllChkBoxes = () => { let checkboxes = document.querySelectorAll('[name=testChk]'); checkboxes.forEach((checkbox) => { checkbox.checked = true; }); $("#selectAllChkBoxes").text("취소") $("#selectAllChkBoxes").attr("onclick", "unselectAllChkBoxes()") } querySelectorAll 을 활용하여 같은 name 을 지닌 DOM element ..

처음부터 끝까지 만든 것도 아니고 있는 소스를 가져다 쓴 것이긴 하지만 처음으로 React 를 활용하여 웹 구현을 해보려고 하였다. 아래 Github 링크에서 Youtube 클론코딩 소스를 가지고, 영상 검색 UI 를 만들어보려고 하였다. 링크: https://github.com/ozngrsc/YouTube-Clone GitHub - ozngrsc/YouTube-Clone Contribute to ozngrsc/YouTube-Clone development by creating an account on GitHub. github.com 소스는 유튜브 메인페이지를 구현하였다. (검색결과 페이지도 있긴 하지만 해당 프로젝트에서는 메인페이지만 활용하였다) 우선 처음으로 페이지가 렌더링될 때 전체 검색결과가 나..

모든 React Component 에는 라이프사이클(수명주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝나는 것이다. React 로 개발을 하다보면 Component 를 처음으로 렌더링할 때 어떠한 작업을 처리해야할 때도 있고, Component 를 업데이트하기 전후로 어떠한 작업을 처리해야할 수도 있다. 이 떄 Component 의 라이프사이클 메서드가 사용된다고 한다. (라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며 함수형에서는 Hooks 를 사용하여 비슷한 작업을 처리해줄 수 있다고 한다) 라이프사이클은 마운트, 업데이트, 언마운트 세 가지로 나뉘어진다. DOM 이 생성되고 웹 브라우저 상에 나타나는 것을 Mount 라고 한..