전체 글 (102) 썸네일형 리스트형 React router react router란 ? react는 기본적으로 하나의 화면만이 동작합니다. 그런데 개발자가 두개의 화면이상을 만들고 싶을 때가 있겠죠 ? 그 때에 이 react router를 사용합니다. reactrouter를 설치하는법은 매우 간단합니다. 자신의 프로젝트에 가서 npm install react-router-dom 해주시면 됩니다. 그럼 준비를 마치셨습니다. 오늘은 아주 간단하게 url이 변하면 다른 곳으로 가지게 해보겠습니다. 먼저 home과 next화면을 만들어 보겠습니다. 그 다음 앱의 부분입니다. 설명은 주석으로 대신합니다. 여기서 주의하셔야할 점은 route path = "/"부분을 마지막에 써준 것입니다. 마지막에 써야하는 이유는 앞에 쓴다면 /next라고 url에 입력을 해도 /에 먼저.. React - class의 life cycle(라이프 사이클) - componentDidmount, componentWillmount ... React, class의 life cycle로 여러가지가 있습니다. componentDidmount()는 컴포넌트가 마운트된 직 후에 호출됩니다. 외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 적절한 위치라고 할 수 있습니다. componentWillmount()는 마운트가 발생하기 전에 호출됩니다. render가 실행되기 전에 실행되기 때문에 이 메서드 안에서는 setState를 사용하더라도 추가적인 랜더링이 발생하지 않으니 주의해주세요 componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. (! 최초 랜더링에서는 호출되지 않음) componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다.(! 여기서는 setState를 쓰면 안돼요.) .. React State(function) React로 프로젝트를 만들 때에 크게 두가지로 만들 수 있습니다. class와 function입니다. class는 state와 props를 쓰고 function은 state대신 useState를 사용합니다. 이번에 다룰 것은 function의 useState입니다. class와 확실히 선언하고 변경하는 법이 다릅니다. 먼저 function의 useState 선언하는 방법은 const [변수명, set변수명] = useState(초기값); 입니다. 예를 들어 const [count, setCount] = useState(0); 이런 식으로 선언해주시면 됩니다. 여기서 주의해야할 점은 set변수명을 적을때에 변수명의 첫글자는 대문자로 적어주셔야합니다. 또한 import {useState} from 'rea.. React props(class, function) props는 class와 function 두 부분에서 쓰는 법이 비슷해서 같이 다뤄보도록 하겠습니다. 그래도 처음에는 class function 둘다 동시에 익히는 것이 아닌 둘 중에 하나를 먼저 익히고 다음 것을 익히는 것을 추천합니다. props는 부모 컴포넌트로부터 물려받는 값이라고 할수 있습니다. 그래서 부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 변경이 됩니다. 또한 props는 읽기 전용입니다. function이나 class 모두 컴포넌트 자체 props를 수정해서는 안됩니다.(react의 규칙중 하나이기 때문입니다.) 이번에는 props를 이용하여 현재시간을 출력해보겠습니다. 먼저 Class입니다. 다음으로 function을 사용하여 만들어 보겠습니다. 감사합니다. React의 State (class) React로 프로젝트를 만들 때에 크게 두가지로 만들 수 있습니다. class와 function입니다. class는 state와 props를 쓰고 function은 state대신 useState를 사용합니다. 오늘 다룰 것은 class의 state입니다. state는 유동적인 데이터를 사용할때 사용합니다. state는 초기값 설정이 필수이며, this.state = {}를 사용하여 초기값 설정을 해주어야 합니다. 여기서 주의해야할 점은 state는 직접 조작하거나 해서는 안되며 변경이 필요할 때에는 setState메소드를 이용해야합니다. 왜냐하면 React는 state가 변경될때마다 변경된 부분을 감지해서 다시 랜더링을 하는데 setState메소드를 사용하지 않고 직접 state값을 수정하면 변경을 감지.. React로 웹사이트 만들어보기 create-react-app react를 사용하여 웹사이트를 한번 만들어 보려 합니다. 그 전에 필요한 것은 1. node.js 2. visual code 두가지입니다. node.js 설치하는 법은 매우 간단합니다. 구글에 node.js를 검색하면 나오는 nodejs의 공식 사이트의 화면에서(nodejs.org/ko/) 가장 최신 버전 또는 안정된 버전을 다운 받으면 됩니다. 제대로 설치가 됐는지 확인 하는 방법은 cmd창을 켜서 node -v를 입력해보면 설치하신 버전을 확인하실 수 있습니다. 비쥬얼 코드도 마찬가지로 구글에 검색하여 공식사이트를 통해 설치하시면 됩니다.(code.visualstudio.com/Download) 자 ! 이제 모든 준비를 마쳤습니다. 그러면 모두 cmd창을 켜서 자신이 프로젝트를 생성할 파일 위치에 .. 이전 1 ··· 10 11 12 13 다음
