목록JS (15)
It won't hurt to try
https://reactjs.org/docs/react-api.html#reactpurecomponent React Top-Level API – React A JavaScript library for building user interfaces reactjs.org Component에서는 state나 props를 불러오기만 해도 렌더링이 진행되고 있는 반면에, PureComponent에서는 shallow comparison방식으로 오브젝트 레퍼런스를 검사한다. 오브젝트 레퍼런스가 다르다면 다시 렌더링을 한다.
JSX가 있기전의 리엑트는 자바스크립트 구문에 가까웠기 때문에 디자이너들이 여러가지로 난항을 겪었다. JSX가 등장하고 디자이너들도 읽을수 있는 HTML형식과 비슷해졌다. 컴포넌트의 return에 jsx구문을 넣어서 화면에 표시한다. 형제 노드의 경우 나 태그로 묶어서 에러가 나지 않게 한다.
리엑트는 Component라는 클래스를 상속받아서 component를 생성할수 있다. component는 state와 render함수를 가진다. component의 특징은 lifecycle을 가진다는것인데, lifecycle의 역할은 특정 조건에서 액션을 준다던지 동적이게 변하는 효과를 준다. React.Component React.PureComponent
프로젝트의 세부정보를 보고 싶을때 yarn eject를 통해서, 숨겨져있는 라이브러리 등을 확인할 수 있다. 주의해야 할 점은 eject를 하게 되면 다시 묶을 수 없다. 그렇기 때문에 아래에 나오는 친구들을 수정하지 않아도 된다면 굳이 eject를 할 필요는 없다. 그중에서 자주 나오는 라이브러리로 babel과 webpack등이 있다. babel은 javascript transcompiler이다. 최신 버젼의 문법을 과거 버젼의 문법으로 trans한다던지, typescript와 같은 형식을 javascript로 변형시켜준다. webpack은 javascript 모듈을 번들링시켜주는 친구이다. eslint는 javascipt코드를 한번 확인해주는 친구이다. jest는 javascript 테스트 프레임워크..
[React] create react-app
https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 위 커멘드 실행중 버젼 관련해서 에러가 발생할 경우, 이방법으로 해결해준다. https://stackoverflow.com/questions/5056115/how-to-install-latest-version-of-node-using-brew How to install latest version of Node using Brew The latest version of NodeJs ri..
리엑트에는 수많은 컴포넌트가 존재한다. 컴포넌트의 가장 큰 특징은 밑의 3가지이다. 독립적 고립적 재사용가능 Root컴포넌트 안에는 Navbar, Content컴포넌트가 존재한다. react에는 Virtual DOM Tree 라는 가상 dom이 존재한다. 렌더링을 할때 자식 컴포넌트까지 렌더링을 하게되면, 퍼포먼스적으로 문제가 생길 수 있지만, 이전 virtual dom tree와 비교해서 수정이 필요한 부분만 렌더링을 하게된다. (퍼포먼스적 문제 해결) 가상의 돔트리는 메모리에서 보관하고 있다. 리엑트는 업데이트 할때마다 어플 전체를 다시 렌더링한다.
react-native에서 navigtion을 사용하기 위해서 @react-navigation/native를 이용한다. 먼저 설치부터,, Getting started | React Navigation https://reactnavigation.org/docs/getting-started/ reactnavigation.org yarn add @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view Hello React Navigation | Rea..