JS122 [React] 16. 리액트 Hooks의 규칙을 알아보자 안녕하세요. 박기린입니다. 이번엔 React에서 state를 다루는 데에 주로 사용되는 Hooks의 규칙에 대해 알아보겠습니다. * 리액트 훅 : use로 시작하는 것들은 전부 리액트 훅이라고 보면 됩니다. -> useState, useEffect, useReducer, useContext .. 1. 리액트 안에서만 사용하기 리액트 훅은 리액트 함수 내부에서만 사용할 수 있습니다. 리액트 함수는 - 리액트 컴포넌트 함수 - custom hooks 를 의미하고, 이 안에서 사용하지 않으면, 위 사진처럼 VSCode에서 에러/경고문을 표시합니다. 2. 리액트 훅을 중첩으로 호출하지 않기 위 1번 항목과 연결되는 문제입니다. 리액트 함수 내부에서만 사용이 가능하기 때문에, 다른 함수의 내부에서 호출되지 않습니.. 2023. 12. 11. [백준/JS] 12789. 도키도키 간식드리미 안녕하세요. 박기린 입니다. 백준 12789번 도키도키 간식드리미 문제를 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/12789 12789번: 도키도키 간식드리미 인하대학교 학생회에서는 중간, 기말고사 때마다 시험 공부에 지친 학우들을 위해 간식을 나눠주는 간식 드리미 행사를 실시한다. 승환이는 시험 기간이 될 때마다 간식을 받을 생각에 두근두 www.acmicpc.net 문제 해석 Input 배열 : 백준 문제에서 준 입력값을 담은 배열. 큐 구조를 이용할 예정입니다. Stack 배열 : 임시로 줄 선 사람을 옮겨둘 수 있는 공간 cur : 간식을 받을 차례 위 3가지를 먼저 염두에 둡니다. 가장 먼저 1번 순서가 받을 차례이기 때문에 cur을 1로 설정합니다. .. 2023. 12. 7. [React] 15. 리액트 Context API란 무엇일까? 안녕하세요. 박기린 입니다. 이번엔 React의 state 관리 방법 중 하나인 Context API에 대해 알아보겠습니다. Context API (w. 기존 props 방식의 한계) 리액트는 props라는 걸 통해서 여러 리액트 컴포넌트를 걸쳐 state 데이터를 전달합니다. 리액트 앱이 위와 같은 구조로 이루어져 있다고 가정을 합니다. LoginForm에 있는 Login state를 장바구니 Cart 컴포넌트에서 접근하려고 합니다. 하지만 바로 접근하는 것은 불가능합니다. 위 사진처럼 props를 이용해서 root 컴포넌트로 데이터를 올린 다음, 밑으로 다시 뿌립니다. 이 과정 속에서, 해당 state 데이터를 필요로 하지 않는 다른 컴포넌트들도 지나가야만 하는 상황이 발생합니다. 코드와 구조가 복잡.. 2023. 12. 4. [백준/JS] 20920. 영단어 암기는 괴로워 안녕하세요. 박기린 입니다. 백준 20920번 영단어 암기는 괴로워 문제를 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/20920 20920번: 영단어 암기는 괴로워 첫째 줄에는 영어 지문에 나오는 단어의 개수 $N$과 외울 단어의 길이 기준이 되는 $M$이 공백으로 구분되어 주어진다. ($1 \leq N \leq 100\,000$, $1 \leq M \leq 10$) 둘째 줄부터 $N+1$번째 줄까지 외울 단 www.acmicpc.net 문제 해석 주어진 단어들의 출현 빈도수를 체크합니다. 만약 단어의 길이가 M보다 짧을 경우, 지워버립니다. 예제에서는 M이 4였기 때문에, 글자수가 3개인 ant는 제외됩니다. 출현 빈도수가 높은 순서대로 정렬을 합니다. 출현 빈.. 2023. 12. 2. [백준/JS] 2738. 행렬 덧셈 안녕하세요. 박기린 입니다. 백준 2738번 행렬 덧셈 문제를 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/2738 문제 해석 예제 입력 3 3 1 1 1 2 2 2 0 1 0 3 3 3 4 4 4 5 5 100 입력이 위처럼 주어집니다. 첫 번째 줄이 행렬의 크기 n과 m의 값이 적혀 있습니다. (N * M) 그 다음 줄부터는 두 개의 행렬이 적혀 있습니다. 위의 예제 입력을 n * m에 따라 두 개의 행렬로 나누어서 본다면, 이와 같은 두 개의 2차원 배열로 구분해서 볼 수 있습니다. 이 두 행렬의 같은 위치에 있는 원소들을 합해서, 새로운 하나의 행렬을 만든 후 출력해주는 것이 문제의 목표입니다. 정답 코드 const fs = require("fs"); con.. 2023. 11. 23. [React] 14. useReducer() 사용법 총정리 안녕하세요. 박기린 입니다. 이번엔 React Hooks 중 하나인 useReducer()에 대해 알아보겠습니다. useReducer 란 무엇일까? 간단하게 설명하자면, useState()처럼 state를 수정하는 React Hook 함수입니다. 그래서 일반적으로 useState()를 사용하기에, useReducer()를 자주 사용하진 않습니다만, 특수한 경우에 useReducer()가 도움이 될 수 있습니다. 도움이 되는 경우 state가 엄청 많은 경우 state를 조작하는 수단이 너무 많은 경우 어떤 state가 다른 state로부터 종속된 부분이 많은 경우 위의 경우 useState()를 사용하면 어려움이 있거나 에러가 발생할 수 있습니다. 이때 대체제로 useReducer()를 사용할 수 있습니.. 2023. 11. 21. [React] 13. useEffect() 사용법 총정리 안녕하세요. 박기린 입니다. 이번엔 React Hooks 중 하나인 useEffect()에 대해 알아보겠습니다. Effect(Side Effect)란 무엇일까? useEffect()를 알기 위해선, Effect가 무엇인지를 먼저 알아야 합니다. 여기서 Effect는 Side Effect와 동일한 의미를 지닙니다. React의 주요한 임무는 UI 렌더링입니다. 유저가 키보드를 누르든 클릭을 하든, 입력에 반응하여 필요할 때 UI를 다시 렌더링합니다. React의 역할 - state, props를 관리한다. - state와 props를 기반으로 JSX와 DOM을 평가하고, UI를 렌더링한다. - 유저의 입력을 실시간으로 확인한다. 이러한 React의 역할들은 '화면에 무언가를 가져오는 것(Bringing s.. 2023. 7. 20. [백준JS] 16139. 인간-컴퓨터 상호작용 안녕하세요. 박기린 입니다. 백준 16139번 인간-컴퓨터 상호작용 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/16139 문제 해석 giraffe라는 글자와 [i 0 3]이라는 질문이 주어졌다고 가정합니다. giraffe 문자열 중, 0번째부터 3번째까지의 글자 중에 i가 있는지 검사합니다. i가 하나 있으므로, 1을 출력하면 정답입니다. 하지만, 매번 일일이 for문으로 모든 질문을 검사하게 된다면, 200,000자의 문자와 200,000개의 문제를 견뎌내기 힘들 것입니다. 그래서 누적합 방식을 사용합니다. 위처럼 f에 대한 질문이 여러 개 있을 경우, 미리 f의 갯수를 세어놓은 데이터를 만들어서, f 질문 때마다 뽑아쓰면 효율적일 것입니다. DP라는 {ke.. 2023. 6. 26. [백준JS] 1037. 약수 안녕하세요. 박기린 입니다. 백준 1037번 약수 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/1037 문제 해석 본문의 예제를 인용해서 설명하겠습니다. 예제의 답인 24의 약수는 위와 같습니다. 이 중 '1'과 '답이 되는 약수'를 제외한 수들이 입력으로 주어집니다. 그리고 이 값들을 이용해서 '24'라는 답을 도출해내면 됩니다. 이 문제를 쉽고 빠르게 해결하는 방법으로, 하나의 간단한 수학 지식을 알면 됩니다. 약수의 양끝 수들을 곱해주면 정답이 나옵니다. 이런 식으로 말이죠. 문제에서 받은 입력값은 '1'과 '정답이 되는 수'가 제외된 상태로 주어집니다. 반대로 말하자면, 이 입력값들의 최대값과 최소값을 곱하면 정답이 나옵니다. 정답 코드 const fs .. 2023. 4. 25. 이전 1 2 3 4 5 6 ··· 14 다음
