FrontEnd/React (38) 썸네일형 리스트형 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(){//.. JSX문법에 대한 몇가지 주의 사항 아래 문법사항은 C:\FrequentlyUsedFiles\ReactProjects\react-webgame 구구단 파일에서 가져온 것임 반드시 기억할 것이 우리가 만든 컴포넌트(예를들면 위의 LikeButton)는 반드시 첫문자를 대문자로 기록하고 기본적으로 제공되는 엘러먼트는 반드시 소문자로 해준다. html 같은 경우 대문자도 되지만 xml은 html의 조상격으로 html보다 까다롭다. 이렇게 까다로움에서 생긴 문법이 또 하나 있는데 input 태그에서 반드시 닫는 열린태그 맨 뒤에 닫는 태그의 의미로 /를 꼬옥~ 기입해 주어야 함. 안 붙이면 에러남. 그리고 js코드 부분은 반드시 중괄호로 감싸야한다!!!!!!! 따라서 {this.setState({liked: true});}} obj={a:'b',.. React launch! (매우중요) 참고: https://www.youtube.com/watch?v=6GECT2Jrr_g&t=572s https://www.youtube.com/watch?v=5lgITNI0ZJo&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=3 리엑트는 특별한 존재가 아닙니다. 웹브라우저가 이해할 수 있는 언어는 결국 HTML, CSS, JS뿐입니다. 화면을 구성하는 것은 HTML, CSS일 뿐이고 그에 대한 동작은 자바스크립가 해주는 것입니다. React는 결국 자바스크립트일 뿐입니다. React는 JS로 HTML, CSS를 만들어 내는 존재일 뿐입니다. React로 작업해도 그 결과물은 html, css, JS가 나와야 합니다. 그래야만 브라우저가 코드를 읽고 화면을 그릴수 있는 것.. 이전 1 2 3 4 5 다음
