본문 바로가기

분류 전체보기157

[리액트] useReducer - 다양한 상태를 업데이트 하기 useReducer는 useState보다 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺄 수 있다는 것이다!! - useReducer를 알아보기 전에 reducer(리듀서)에 대해 알아보자. 리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아서 새로운 상태를 반환하는 함수이다. [예시] function reducer(상태, 액션) { switch (액션.type) { case "증가": return { value: 상태.value + 1 }; case "감소": return { value: 상태.value - 1 }; default: return 상태; } } reducer라는 함.. 2021. 8. 12.
[리액트] API 키 숨기기, 환경 변수 401 오류와 undefined 해결 리액트로 프로젝트를 하다가 API 키를 가져와야 할 일이 생겼다. API 키는 아주 소중한 녀석이기 때문에 .gitignore에 추가해주어야 한다!! 마치 내 개인정보와 같다고 보면 된다. 어떻게 숨겨주어야 하는지 알아봅시다~! 401 에러가 발생할 때, .env를 추가했는데 undefined가 뜬다면 맨 밑을 참고 부탁드립니다. 1) dotenv를 설치해준다. yarn, npm 중 편한 걸로 선택해서 설치하면 된다. yarn add dotenv npm install --save dotenv 2) 프로젝트 루트 경로에. env 파일을 생성해준다. (src폴더 안 아님!!) 3) .env 파일 안에 변수를 작성하고 API key를 넣어준다. 리액트 프로젝트에서는 환경변수 이름 앞에 REACT_APP_을 꼭.. 2021. 8. 6.
[리액트] 리액트 필수 크롬 확장 프로그램 (react developer tool) 변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다. 그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다. 참고) 렌더링이 일어나는 시점은 - state나 props가 변경될 때 - 부모 컴포넌트가 변경될 때 - forceUpdate()가 호출될 때이다. 렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!) 개발자 도구를 열어보면 Components 탭이 새로 생겼다!! 탭에 들어가서 톱니바퀴를 클릭해준다. General에 있는.. 2021. 7. 25.
[리액트] 버튼 클릭시 요소 표시, 숨기기 오늘 해볼 실습은 버튼을 클릭하면 요소(컴포넌트)가 보이고, 다시 버튼을 클릭하면 숨겨지게 하기!! 여기서 '보이기' 버튼을 클릭하면, 버튼은 '숨기기'로 바뀌고, Input창에 입력한 이름, 나이, 전화번호가 출력된다. [Myinfo.jsx] 컴포넌트의 이름은 Myinfo이며 코드는 다음과 같다. useState로 3개의 속성(이름, 나이, 전화번호)을 만든다음 onChange 이벤트 세 가지를 만들어주었다. 하지만, 이글의 핵심은!! 버튼 클릭시 어떻게 요소를 표시하고 숨기는 것이다!!! App.jsx에 다음과 같이 코드를 적어준다. [App.jsx] 코드를 위에서 아래로 설명하기보다 핵심만 설명하겠음!! 우선 15번째 줄을 보면, AND 논리연산자가 나온다. (만약 논리 연산자를 모르겠다면 밑 링크.. 2021. 7. 23.
[파이썬/알고리즘] 프로그래머스 - 괄호 회전하기 [문제 설명] 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수를 retur.. 2021. 7. 18.
[파이썬/알고리즘] 프로그래머스 - 짝지어 제거 (2017 팁스다운) [문제 설명] 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. [제한 사항] 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있.. 2021. 7. 15.

티스토리툴바