WEB/REACT
-
nodebird 3일차WEB/REACT 2020. 9. 24. 18:54
##nodebird 3일차 ##useCallback 컴포넌트에 props로 넘겨주는 함수는 useCallback을 꼭 써야 최적화가 된다. ##jsx 태그들 리액트에선 clas와 for을 제외하면 표준 html속성을 모두 사용할 수 있다고 한다. 그래서 className이랑 htmlFor이라는 태그가 생겨난듯함. 또 배열로 jsx쓸때는 key를 붙여줘야함 ##styled-component 쓰는 이유. 인라인으로 했을 때보다 성능상의 이점이 있음. styledcomponent로 하면 다시 안 그림. (리렌더링이 될때는 함수 안에부분이 다시 실행되는것은 맞음.return부분중 바뀐부분만 다시 그림) 너무 집착하지는 말라네요. 컴포넌트를 만들어줍니다. ##antd의 컴포넌트를 styled-component로 ..
-
nodebird-2일차WEB/REACT 2020. 9. 10. 12:33
##nodebird 2일차 어제 몰랐던 children은 '노드'라고 한다. 여기서 노드는 노드js의 노드가 아니라 리액트 노드(리엑트에서는 화면에 그려지는 것들을 노드라고 한다네요.)이다. Children은 그냥 감싸준 하위 jsx태그? 정도로 이해했다. ex) 어쩌구 여기선 앱레이아웃 밑에 div태그가 칠드런인거다. 어쨌든 어느정도 이해했으니 넘어간다. 나는 자바스크립트를 하고있기 때문에 propTypes를 써야한다. 타입스크립트에서는 안쓰지만 어쨌든 쓴다. 예전에 노마드코더 강의 볼때도 나왔던 녀석이다. ##Link 넥스트는 자체적인 Link가 있다. ##eslint lint는 여러사람이 코딩해도 한사람이 코딩한 것 처럼 규칙을 통일 시켜주는 툴이다. ##코드스플리팅 리액트 특성상 한..
-
nodebird-1일차WEB/REACT 2020. 9. 9. 00:46
넥스트,코드 스플릿을 써야하는 이유(서버사이드 렌더링) 검색엔진에 사이트가 등장해야해서, 로딩창이 나와야해서 ->그래서 어드민 페이지 등을 제작할 때는 안쓴다 그다음에 리액트와 next를 설치하고 pages 폴더에 페이지들을 만들어줬다. next덕분에 라우팅을 설정하는 것을 간단하게 할 수 있게 되었다. component 디렉토리에 많이 쪼갠것들을 넣는다고 한다(보통은.. 이 디렉토리의 이름이 꼭 component일 필요는 없음) 그리고 리액트 칠드런.. 이거는 전에도 찾아봤는데 잘 안나와서 빡쳤던 기억이 그래서 유튜브에서 영상 찾아보다가 1시간동안 딴짓했음
-
HooksWEB/REACT 2020. 7. 28. 03:18
#Hooks //아래 포스트는 노마드코더 hooks강의를 참고했습니다. Hooks는 funcional component에서 state를 가질 수 있도록 해준다. => 함수형 프로그래밍이 된다는 뜻. 한가지 예시로 우리는 useState를 위에 import하여 쉽게 hook을 이용할 수 있다. const [count, setCount] = useState(0); count는 여기서 value이다. useState(0)이라서 count는 0부터 시작한다. setCount는 value를 변경하는 메소드이다. 배열안에 들어가는 것들의 이름이 count나 setCount말고 hyunsu, minsu등등이어도 괜찮다. 메소드가 어떤것이든간에 value를 나타내는 변수의 값을 변경해주는 것으로 이해하면 될 듯하다. ..
-
stateWEB/REACT 2020. 7. 28. 01:11
#State 예전에 vue js를 잠깐 맛보기 했을 때 data (){ return { } } 이런식으로 미리 데이터를 정의해두고 이용했던 부분이 있던것 같다.(vue js를 맛보기정도만 했고 대충했었어서 아닐수도 있다) state가 여기 data랑 같은 느낌이다. 미리 이용한 데이터를 넣어두고 이용하는 느낌이다. 조금 차이점은 리액트의 state의 경우가 조금 더 자바스크립트 적인 느낌이다. ###props vs state 지난 시간에 props에 대해서 썼었는데 props와 state는 다르다. props는 jsx를 작성할 때 쓰는듯 하지만, state는 클래스를 작성할 때 가지게 되는 것이다. https://youtu.be/wkFGIV9RV2M 해당 영상이 이해를 하는데 큰 도움을 주었다. 생활 코..
-
PropsWEB/REACT 2020. 7. 23. 15:23
Props props는 컴포넌트들의 재사용성을 좋게 하기위해서 사용하는 것으로 jsx태그를 쓸 때 쓰는 형식으로 사용한다. Props는 적을것이 별로 없는것같다. 컴포넌트쪽에서 props를 인자로 받아주거나 아니면 비구조화할당하여 이용해도 되는듯 다음은 props의 이용예제다. 아래와 같은 코드로 props를 이용할 수 있다. ###App.js import React from 'react'; import './App.css'; import Counter from './Counter'; function App() { return ( ); } export default App; ###Person.js import React, {useState} from 'r..
-
componentWEB/REACT 2020. 7. 23. 11:41
리액트 강의를 수강하기에 앞서 https://learnjs.vlpt.us/ 사이트에서 자바스크립트 기초를 복습하였다. https://react.vlpt.us/basic/ 그리고 앞으로 듣게될 강좌의 텍스트는 이거다 자 그러면 create-react-app을 이용해 우리의 첫 리액트 프로젝트를 시작해보자. 그리고 Hello.js라는 파일을 생성해 보자. Hello.js의 코드는 다음과 같다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들때에는 두가지 규칙이 있다. 1. 상단에 import React from 'react'; 를 통해 리액트를 import 해주어야한다는 것이고 2. 하..