백준 1074 Z (파이썬)
2022. 12. 25. 22:21
백준
풀이 및 해설(주석) def solve(n, r, c): global rst if r == tr and c == tc: print(rst) exit() # 찾는 위치에서 벗어난 경우 n의 범위만큼 더해주고 return if not(r
[리액트] useReducer
2022. 12. 25. 21:26
리액트
useReducer useReducer는 state의 관리를 도와준다. 더 많은 기능이 있고 복잡한 state에 유용하다 여러 state가 같이 바뀌거나 서로 관련된 경우에는 종종 관리의 어려움과 오류가 생기기 쉽다. 이런 경우 useReducer를 useState대신 쓸 수 있다. 위의 코드는 입력된 이메일과 그 이메일이 유효한지 state로 관리하는데, 이 때 이메일이 유효한지에 대한 상태 변화를 이메일을 입력한 state로 판단한다. 즉, state를 다른 state를 기발으로 해서 업데이트 하고 있는데, 일반적으로는 이렇게 하지 않는다. 이런 경우에는 useReducer를 사용하는 것이 좋다. 다른 state를 기반으로 state를 업데이트 하는 경우 하나의 state로 병합하는 것도 좋다. 아래..
[리액트] useEffect
2022. 12. 25. 21:26
리액트
useEffect 의 필요성 리액트 앱은 기본적으로 state가 변경되면 그 컴포넌트를 다시 평가한다. 사이드 이펙트는 애플리케이션에서 일어나는 다른 모든 것을 뜻한다. 예를 들면 http 리퀘스트를 보내는 것, 또는 브라우저 저장소에 무언가를 저장하는 것이다. 이것들은 모두 애플리케이션에서 고려해야 하는 작업이다. 예를 들어, 웹 애플리케이션은 대부분 백엔드 서버에 요청을 보낸다. 그러나 이러한 작업들은 화면에 무언가를 가져오는 것과는 관련이 없다. 즉, 이것들은 리액트를 필요로 하지 않는다. 따라서 이것들은 일반적인 컴포넌트 평가의 밖에서 일어나야 한다. 그래서, http 리퀘스트를 보내는 코드를 컴포넌트 함수 안에 적으면 state가 변경되어 컴포넌트가 재 평가될 때 마다 계속 실행이 될 것이고 이..
[리액트] useRef 사용하기
2022. 12. 25. 21:26
리액트
useRef 현재까지는 useState를 사용하여 사용자 입력 값을 받아와 저장하였다면, 이러한 입력값들은 Ref를 사용하여 관리하는 것이 더 효율적이다. 어떠한 것을 바꾸지 않고 단지 값을 읽어오는 용도로는 굳이 state를 사용할 필요 없이 ref를 사용하는게 좋다. 예를 들어 input창에 사용자에게 데이터를 입력받아 이를 사용하려면 ref를 쓰는게 코드도 적고, 알맞다 useRef import ref 변수로 지정해주기 input 태그 속성에 ref속성 집어넣어주기 값에 접근하기 useRef 기본적으로 객체형태이다. 접근하기위해서는 위의 빨간 박스처럼 변수명.current.value를 사용해 접근한다. 아래박스처럼 직접 조작할 수도 있다.
[리액트] React.Fragment 사용하기
2022. 12. 23. 22:53
리액트
React.Fragment 지금까지의 jsx기준에 따르면 컴포넌트의 태그들은 여러개가 동일한 위치에 있지 못하고 무조건 하나의 div, 또는 태그로 감싸줘야 했다. 이 방법은 나쁘지 않은 방법이지만, 자칫하면 div soup에 빠질 수 있다. 이를 해결하기 위해 리액트는 React.Fragment라는 것을 제공한다. 사용하는 법은 간단하다. 아래와 같이 두 가지 방법으로 사용하면 된다. 기존 div로만 감싸왔던 태그들이 Fragment를 사용하여 jsx의 규칙도 지키고, div soup에도 빠지지 않는다.
[리액트] Portal 사용하기 (PortalReactDOM 사용)
2022. 12. 23. 22:48
리액트
Portal 사용하기 (PortalReactDOM 사용) 리액트의 Portal기능은 우리가 원하는 컴포넌트의 위치를 옮겨줄 때 사용한다. 예를 들어, 컴포넌트가 많이 중첩되어 있고 그 안에 모달과 같은 overlay형식의 컴포넌트가 있을 경우 의미적인 관점이나 간결한 html구조를 가추지는 못하여 좋지 못한 구조가 된다. 이를 Portal을 사용하여 body의 바로 밑 자식으로 옮길 수가 있다. 아래에서는 현재 작업중인 프로젝트를 예시로 모달창을 body바로 아래의 태그로 옮겨보는 작업을 해보겠다. index.html 먼저 Portal로 이동할 위치를 설정하기 위하여 index.html 파일에서 이동할 div와 id를 설정해준다. Modal 컴포넌트 컴포넌트를 변수로 저장하여 Portal로 이동시킬 작업..
[리액트] css모듈 사용하기
2022. 12. 22. 21:39
리액트
css모듈 사용하기 앞서 사용했던 styled-components말고도 다른 방법으로 css파일을 유지하며 고유의 스타일을 줄 수 있다. 리액트에서는 css모듈을 기본적으로 제공하여서 설치할 필요 없이 import해 사용하면 된다. styles import하기 위에서 짐작하였겠지만 기존의 Button.css파일의 이름을 중간에 .module을 추가해 Button.module.css로 바꿔준다. className 주는 방법 기존에는 단순히 className="button"을 사용했다면, 이제는 중괄호 사이에 styles.클래스이름 형식으로 사용한다. 실제 크롬 개발자도구로 살펴보면 class가 고유한 값을 가지는 것을 볼 수 있다.
[리액트] style-components 동적으로 변화주기
2022. 12. 22. 21:23
리액트
style-components 동적으로 변화주기 어떤 상태에 따라 style을 동적으로 변화주는 것은 기존 style속성, 또는 className으로 했었다. 하지만 style-components를 사용하는 상태에서 동적인 변화를 주려면 다음과 같이 할 수 있다. 일단 다음과 같이 FromControl이라는 styled.div를 만들어 스타일을 준다. 위의 코드를 보면 알겠지만, 컴포넌트에서 props를 넘겨주는 것처럼 여기에도 props를 넘겨줄 수 있다. isValid라는 상태를 넘겨주고 이에 맞게 스타일을 준다.