본문 바로가기

전체 글

 (359)
useCallback에 관하여(fetch예시 나옴) 요약: useCallback은 2개의 인자를 취한다. 첫번째인자는 함수이고 두번째 인자는 배열이다. 그리고 배열의 값중 어느 하나라도 변경되었을때만 첫번재 인자로 전달된 함수 자체가 다시 반환된다. (우선 React.memo 예시는 제외하고 봄) 출처: https://www.daleseo.com/react-hooks-use-callback/#google_vignette React Hooks: useCallback 사용법 이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. 함수 메모이제이션 useCallback()은 함수자체를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째..
vscode launch.json 파일과 브라우저 안뜨는현상 react를 사용하여 정상적으로 프로젝트 빌드까지 했는데도 브라우저에서는 계속 뺑뺑이 표시만 돌고 있고 정상적으로 실행이 되지 않는 문제의 원인은 아래의 launch.json때문이다. 이 파일을 반드시 지워야 한다. 그렇지 않으면 정상적으로 실행이 되지 않는다. 아래와 같이 브라우저가 계속 뺑뺑이 표시만 돌고 있다면 반드시 위의 파일이 있는지 확인해야 한다.
hooks의 userState와 useRef의 다른점 hooks의 userState와 useRef의 다른점useState, useRef모두 DOM을 직접적으로 건드릴때 사용된다. 하지만 상태를 변화시킬때 setState를 사용하면 (return 문안에서)리랜더링이 되지만 useRef에 관한 상태변경은 리랜더링을 하지 않는다. ㅈ 따라서 화면은 바뀌길 원하지 않고 값만을 바꾸고 싶은 경우 useRef를 사용하면 됩니다!!!!
클래스 컴포넌트의 state속성에 대하여, ref 속성에 대하여 클래스 컴포넌트 안의 state역시 속성(property)이다. 그리고 클래스 컴포넌트의 속성은 변수와 같은 개념이라고 우선은 알아두자. 리엑트에서 데이터는 1. 변수에 넣거나 2. state에 넣는다. 리엑트를 웹앱처럼 동작하게 만들고 싶다면 중요한데이터는 state를 사용한다. state로 등록된 데이터가 바뀌면 그것은 곧 새로고침 없이도 리랜더링된다. 변수와 state로 관리되지 않는 것은 변경되어도 자동 re-rendering이 되지 않음. ====================================================================================== useState만 사용하면 해당 인수가 prop이 변경될 때마다가 아니라 처음에만 사용되기 때문에 작동하..
import와 require의 공통점과 차이점 그리고 module.exports와 export default 의 공통점과 차이점에 대하여 참고: https://velog.io/@ylyl/React-import-require React관련 동영상을 보면 어느곳에서는 import, export default를 사용하고 어느 동영상에서는 require, module.exports를 사용하는데, 시험삼아 두개를 서로 바꾸어 보아도 정상적으로 동작을 하였다. 이런 것을 보고 이것들의 차이점은 무엇인지 궁금하여 이글을 쓰게된다. 요약: import : es2015(React) 모듈 문법으로 정적 import 로써 항상 파일 상단에서만 사용된다. 이에반해 require은 Node의 모듈 문법(common.js)으로 동적 import에 해당하며 파일 어디에서나 사용가능하다. 쉽게 생각해서 React에서는 import 가 필요할때는 require를 쓰면 ..
React launch2! (매우중요) 출처:https://www.youtube.com/watch?v=6GECT2Jrr_g (실습 내용은 내 프로젝트파일인 REACTPROJECTS를 참고) pages폴더와 그 안에 Home.js파일을 만듬 // import React from "react"//jsx문법을 쓰기위해 필요함 // //JSX문법은 HTML태그를 사용할수 있으므로 아래와 같은 것을 return하는게 가능한 것임 // //함수형 컴포넌트의 예 // function Home(){ // return Home화면입니다. // } // export default Home; //클래스형 컴포넌트의 예 import React, {Component} from "react"; class Home extends Component{ render(){//..
TailwindCSS설치방법 # TailwindCSS 설치방법 #npm #CDN 출처: https://www.youtube.com/watch?v=zun40BxCzYU&list=PLTb3qGCzYjS3DHl3q0Hlq8kRT5fd9aK5_&index=2 (위의 영상은 https://tailwindcss.com/docs/installation 여기에 있는 내용을 자세히 설명한 것이다. 여기서 주의할 점은 아무리 영상을 봐도 결국은 그것은 흔들리는 지식이다. 내가 굳건하게 설려면 공식문서를 해석하는 힘을 길러야 한다. 이 힘을 기르는 좋은 방법은 저런 친절한 영상과 문서를 비교해가면서 보고 어떤 내용이 공식문서에는 생략되어 있는가, 그리고 공식문서에서는 어떤 방식으로 설명하는가, 둘의 차이점을 비교하면서 공부하는 것이다) (복습. npm..
npm에 대하여 출처: https://m.blog.naver.com/magnking/220961896609 npm은 Node Packaged Manager의 약자! 먼저 Node는 Node.js를 의미하는 것 같습니다. Packaged라는 것은 package로 만들어진 것들을 의미하는 것 같습니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고 Manager는 잘 아시는 것처럼 관리자를 의미합니다. 이걸 합쳐보면 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 것이 됩니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 ..

티스토리툴바