본문 바로가기

컴퓨터 사이언스/TIL 정리85

[한 입 리액트] PAGE ROUTING PAGE ROUTING ROUTER 데이터의 경로를 실시간으로 지정해주는 역할을 함 ROUTING이란? 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말, 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 PAGE ROUTING이란? 요청(에 명시되어 있는 경로 ex. /home)에 따라서 어떤 페이지를 응답(ex. Home.html)해줄지(돌려줄지) 결정하는 과정 여러 페이지를 준비하고 있다가 요청된 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multi Page Application) 반면, 리액트는 SPA(Single Page Application) 방식을 따르고 있다. 이 때의 Web Server는 Node.js, 전달받는 페이지는 index.html !.. 2022. 8. 19.
[한 입 리액트] 배열 사용하기 - 데이터 추가, 삭제, 수정하기 state인 data를 DiaryList 컴포넌트에서 사용하고자 data를 prop으로 받아와 사용하는 것을 볼 수 있다. 새로운 일기 추가할 함수 onCreate를 DiaryEditor 컴포넌트에서 사용하고자 onCreate 함수를 prop으로 받아오는 것을 볼 수 있다. 2022. 8. 19.
[알고리즘] 강의복습 - 배열 2022. 8. 18.
[알고리즘] 강의 복습 - 해싱 숫자를 count 할 때는 해싱을 사용할 필요없이 배열을 사용하면 된다. 하지만, 문자나 문자열을 count 해야할 때는 문자열을 key로 하고 int를 value로 할 수 있는 해시라는 기능을 사용한다 ! 해시를 지원해주는 자바스크립트의 자료구조는 map이다 ! nums의 원소가 1000을 넘지 않는 자연수이라고 할 때, 배열의 크기는 숫자 0부터 카운트를 할테니 1001이어야 한다. >> Array(1001) 이라고 작성 2022. 8. 18.
[리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 모든 리액트 컴포넌트는 라이프사이클(생명주기)이 존재하고, 이 수명은 페이지에 렌더링되기 전의 준비 과정에 시작해 페이지에서 사라질 때 끝난다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드는 총 9 가지이다. Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되는 메서드, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 총 3 가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. 마운트 DOM이 생성되고 페이지에 컴포넌트가 나타나는 것을 말한다. 컴포넌트 만들기 → constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생.. 2022. 8. 16.
[리액트를 다루는 기술] 컴포넌트 반복 데이터 배열을 컴포넌트 배열로 변환하기 const numbers = [ 1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); // [1, 4, 9, 16, 25] import React from 'react'; const IterationSample = ( ) => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map(name => {name}); return {nameList}; }; export default IterationSample; map으로 생성된 배열 값을 사용하여 JSX 코드로 된 배열을 새로 생성한 뒤 nameLIst에 담았.. 2022. 8. 15.
[리액트를 다루는 기술] ref: DOM에 이름 달기 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref의 개념이다. 리액트 컴포넌트 안에서 id를 사용할 수 있기는 하지만, 같은 컴포넌트를 여러 번 사용할 경우, 중복 id를 가진 DOM이 여러 개 생기는 상황이 되기 때문에 권장하지 않는다. 하지만, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 경우에는 컴포넌트를 만들 때마다 id 뒷 부분에 추가 텍스트를 붙여서 (ex. button01, button02, ...) 중복 id가 발생하는 것을 방지해야 한다. ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다 !.. 2022. 8. 14.
[리액트를 다루는 기술] 컴포넌트, 이벤트 리액트의 컴포넌트 컴포넌트 선언 방식 1. 함수형 컴포넌트 2. 클래스형 컴포넌트 차이점으로 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. 하지만, v16.8 업데이트 이후 함수형 컴포넌트도 Hooks 기능이 도입되여 state와 라이프사이클 API 사용이 가능해졌다 ! 리액트 공식 매뉴얼에서는 컴포넌트 새로 작성시 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. ES6 문법에서 화살표 함수는 함수를 표현하는 새로운 방식으로 도입되었다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다 ! 다만, 일반 함수 표기법과의 차.. 2022. 8. 13.
[한 입 리액트] React에서 배열 사용하기 1 - 리스트 렌더링(조회) React에서 리스트 사용하기 Array.map((it) => cf. ctrl + s : 프리티어로 예쁘게 정렬됨 일기 목록을 보여줄 때, map 이용해 객체로 되어 있는 데이터를 props로 활용, DiaryList 컴포넌트에게 dummyList를 diaryList라는 이름의 prop으로 전달. 위와 같이 작성하면, 이런 에러가 뜰 것이다. 리스트의 각각의 자식요소는 고유한 키를 가져야 한다 ! 이 자식들의 부모 태그에 key prop을 설정해준다. (위에서 프롭 중 아이디가 고유하게 있어 활용한 것) (만약에 아이디와 같은 고유값이 없다면, map의 파라미터로 it 외에 idx를 하나 더 추가하면 된다. 다만, idx로 키를 정하면 데이터를 자리를 바꾸거나 해서 idx가 달라지면서 문제가 될 수 있다.. 2022. 8. 11.

티스토리툴바