Age of Discovery

리액트의 고차함수에 대해서 알게 된 내용을 정리하고자 한다. HOC(Higher-Order-Components)는 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. 다른 분들이 써놓으신 블로그랑 공식문서를 찾아보면서 재밌어 보였고 고오급 기술이라는게 눈에 띄어서 공부해봤다. HOC를 쉽게 정의하면 상태관리 로직을 재사용하는 컴포넌트고 생각하면 된다. 여기서 사용하는 로직은 데이터를 받아와서 뿌려주는 정도로 아주 간단하게 작성했다. 바로 코드부터 살펴보자 import React, { ComponentType } from 'react'; import axios from 'axios'; import { useEffect, useState } from 'r..

🟢 대표적인 3가지 리렌더링 조건 Props 변경 (=> properties의 줄임말) State 변경 부모 컴포넌트 렌더링 1️⃣ Props 변경 Props 업데이트가 일어나면 리렌더링을 한다. Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다. 부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다. 2️⃣ State 변경 State 업데이트가 일어나면 리렌더링을 한다. 리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다. 리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다. 3️⃣ 부모 컴포넌트 렌더링 부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한..

다음은 useEffect에 있는 clean up 기능을 알아보자 useEffect(()=>{ console.log('through the wind') return ()=>{ console.log('walk on') } }) useEffect 함수 내에 return 함수를 생성한 후 코드를 작성하면 외부요인에 의해 컴포넌트가 생성되거나 재렌더링 될 때 'through the wind'라는 문구가 출력이 되기전에 'walk on'이라는 문구가 출력 된다. walk on through the wind 가 차례로 console에 출력이 되는것이다. 이 clean up기능은 useEffect 바로 밑의 함수가 실행되기전에 기존에 있던 실행코드를 정리하는 용도로 쓰인다. 예를들어 useEffect(()=>{ let..

지난 게시글에서 포스팅했던 내용을 직접 실행해보자 function App() { let [sort_fun, setSort] = useState('가나다순'); useEffect(() => { { sort_fun == '가나다순' ? console.log('가나다') : console.log('원래대로') } }) { // 리스트를 '가나다'순과 '원래대로'순으로 기능하는 토글버튼 }}>{sort_fun} } 필요하지 않은부분은 생략했다 버튼을 눌렀을때 state가 '가나다'순으로 변경됐을 땐 '가나다'가 콘솔에 찍히고 '원래대로'일 땐 '원래대로'가 콘솔에 찍히게 useEffect를 작성했다. 우측 콘솔창에 정상적으로 출력된다. 맨 처음 가나다가 찍혀있는 이유는 useEffect 안에작성한 코드가 컴포넌..

컴포넌트는 라이프사이클이 존재한다. 거창한건 아니다 크게 3가지로 나눌 수 있는데 1. 생성된다. (mount) 2. 업데이트된다. (update) 3. 삭제된다. (unmount) 각각의 이벤트가 실행될 때 구현하고 싶은 코드를 작성하는 것을 useEffect라고 한다. 바로 컴포넌트를 살펴보자 import {useState, useEffect} from 'react'; function DetailPage(){ useEffect(()=>{ console.log('Hello World') }); return (생략) } 여기선 DetailPage 라는 컴포넌트가 페이지에서 처음 렌더링이 되거나 혹은 State 조작에 의해서 컴포넌트 내용이 변경될 때 useEffect 함수 안의 코드가 실행된다. 위 컴포..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 역시나 마찬가지로 리스트로 사용할 state를 작성한 후 이번엔 input text박스에 글을 입력했을 시 배열을 추가해서 리스트 맨앞에 생성되게 해보자 { let input_text = document.querySelector('.input-text'); if (input_..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전 게시글과 마찬가지로 State를 4개 생성한 후 list로 작성하여 화면에 띄워주고 props파라미터를 넣어 Modal창을 만든 후 띄워줬다 리스트의 각 타이틀을 클릭했을 때 모달창의 상세정보도 클릭한 선수들의 내용으로 변경하고싶다 지금은 변경이 안된다. 조작해보자! le..

props는 자식 컴포넌트가 부모 컴포넌트의 State를 편하게 사용하기 위해 고안된 기능이다. let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전편과 마찬가지로 역시나 상단의 배열들을 State로 저장해준 후 자식 컴포넌트를 하나 만들어준다. let Modal = () => { return( 선수 이름 생년월일 주사용발 ..

map함수는 사실 react에 국한되는 내용은 아니다. JS에 있는 함수를 그대로 react에 적용시킨것 뿐 let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['92년생', '92년생', '97년생']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) State로 배열을 생성해놓은 후 { player_name.map(function (a, i) { return ( { a } {player_age[i]} {footed[i]} ) }) } map함수는 배열내의 요소..

html태그를 덩어리로 묶은 함수를 component라고 하는데 이 component를 조작해 토글버튼으로 켰다 껐다 해보자 let Modal = () => { return( 제목 날짜 상세내용 )} 이렇게 생긴 component를 생성했다. function App() { let [modal, setmodal] = useState('닫힘'); return ( { setmodal(modal == '닫힘' ? modal = '열림' : modal = '닫힘') }}>모달 스위치 { modal == '닫힘' ? null : } )} State로 modal을 생성하고 '닫힘' 문자를 저장한다 버튼을 생성 후 setmodal함수로 modal이 '닫힘' 일때는 버튼 클릭시 '열림'문자로 바꿔주고 '닫힘'이 아닐때는..

​ 이번에 프리미어리그 공동득점왕을 수상한 '살라'와 '손흥민'을 배열로 저장해 state로 조작해보겠다. let [Top_player, setplayer] = useState(['살라', '손흥민']); 버튼을 만든 후 { let copy = [...Top_player] copy[0] = copy[1] setplayer(copy) }}>눌러봐 버튼 속성으로 onClick속성을 넣고 화살표 함수안에 지역변수로 배열을 새로 복사해준다 ​ 기존의 배열을 그대로 사용하지않고 따로 복사하는 습관을 들이는게 좋다 원본을 해치지 않기 때문 ​ 그리고 let copy = [...Top_player] 여기서 [... a] 은 스프레드 연산자로 쉽게 메모리의 주소값을 복사하는게 아니라 새로운 값을 복사해줄 수 있기 때문..

확실히 블로그에 기록을 남기면서 공부를 하다보니 훨씬 기억에 오래남는다. ​ 이번엔 State사용해서 눌렀을 때 바로 숫자가 변하는 버튼을 만들어보자 ​ let [like, btn_change] = useState(0) { btn_change(like + 1)}}>좋아요! {like} like라는 state에 0을 할당하고 button을 만들어 onClick속성을 함수로 넣어주었다. ​ 여기서 let [like, btn_change] = useState(0) 두번째 인자(btn_change)는 첫번째 인자를 변화시킬 수 있는 함수를 뜻한다. { btn_change(like + 1)}}>좋아요! onclick속성안에 btn_change(like+1)을 넣어주면 버튼을 클릭할때마다 {like} 제일 위의 s..

그 동안 JS 변수 var, let, const에 대해서만 배웠었는데 리액트에서 쓰는 State라는 변수를 알아보자 ​ let title_1 = 'YNWA'; {title_1} 이렇게 사용하던 변수를 let [title_1, b] = useState('YNWA') {title_1} 이렇게도 사용할 수 있다. ​ 왜 굳이 더 길게 써야하느냐? 변수가 변경됐을 때 새로고침없이 재렌더링이 가능하기 때문이다. ​ ​ 기존 변수를 사용했을 경우엔 새로고침을 해야 유저가 변하는 부분을 확인할 수 있지만 State를 사용했을 시 변수가 변경돼도 홈페이지를 리로드하지않고 바로 변화시킬 수 있다 ​ 사실상 react를 사용하는 핵심이유라고 생각한다. ​ 또한 let [TeamName, a] = useState(['LIV..

언젠가 꼭 학습해야하는 걸 알고 있었지만 바닐라 JS를 완벽하게 마치고 하려다보니 그 핑계로 자꾸 미루는 거 같아서 오늘부터 당장 배우기 시작했다. import blahblah; function App(){ return ( // 원하는 코드 )}; 리액트 설치와 환경세팅은 생략하고 기본 틀은 이렇다 ​ 주석처리된부분에 본인이 원하는 코드를 집어 넣으면 되는데 HTML파일을 따로 두지 않고 JS파일내에서 html 태그를 사용하며 바로 동작 시킬 수 있다. ​ 그로인한 문법의 변화는 감안해야하고 이 문법을 JSX 라고 한다. ​ ​ JSX의 특징 1) // 원하는 코드 html 에서는 class명을 삽입할때 class = "aa"였지만 JSX 에서는 className="" 으로 선언한다. ​ ​ 특징2) f..