Developer Camp[Fastcampus NKLCB] 2021.07/리액트 선학습4 7.20 독학 예습 10 useRef로 DOM선택 2~3 11 배열 렌더링하기 3~4 12 useRef로 컴포넌트 안의 변수만들기 4~5 알고리즘 문제풀이로 인하여 아래 취소 13 배열에 항목 추가 5~6 14 배열에 항목 제거 7~8 15 배열에 항목 수정 8~9 2021. 7. 20. 리액트 자습 2일차 : JSX 이것은 다 자바스크립트 코드다 바벨이란 도구를 사용해서 이 XML형태의 코드가 javascript로 변형되는 것. ✅ 어떻게 검증할 수 있을까? babel 사이트제 접속해서 Try it out탭으로 들어간 뒤에 좌측에 JSX코드를 넣으면 우측에 Javascript 코드로 변형되는 것을 확인할 수 있다. 매번 우측과 같이 코드를 작성하기는 어려우니 JSX 문법을 사용해서 XML형태의 코드를 작성하면 Javascript로 변형되게끔 Babel이 해주는 것. 그런데 이 때 이렇게 변형되게 하려면 규칙을 지켜야 한다. ✅ 규칙을 살펴보자. 1. 코드는 꼭 닫아줘야 한다. input이나 br의 경우 우리는 일반적으로 닫힌 태그를 사용하지 않지만 리액트에서는 무조건 다 닫혀야 한다. 그러면 input이나 br은 어.. 2021. 7. 13. 리액트 자습 2일차 : 리액트 시작 내가 사용하려고 하는 컴포넌트를 하나 만들어준다. Hello.js로 같은 경로에 파일을 하나 만들어주고 아래와 같이 코드를 짠다. import React from 'react'; function Hello() { return 안녕하세요; } export default Hello;기본적으로 있는 App.js에서 필요없는 부분들은 덜어내고 위에서 작성한 Hello.js를 표현한다. 표현하는 방법은 이런식으로 나타낸다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App;index.js 이제 index.js를 봐보자. documen.. 2021. 7. 13. 리액트 자습 1일차 : 리액트를 사용하는 이유 Javascript를 사용할 때 이벤트 핸들러를 사용해서 DOM을 자유자재로 다뤘었는데 규모가 커지다보면 여기저기 이벤트 핸들러에서 DOM을 참조하기 때문에 유지보수가 어려워진다. 리액트는 상태가 바뀌었을 때 어떻게 업데이트할지 규칙을 정하는게 아니라 모든걸 날리고 다시보여주면 어떨까하는 발상에서 탄생. 그런데 모두 날리고 다시 생성하면 속도가 느릴 것. 근데 리액트에서는 Virtual DOM을 사용하면서 속도를 올림. 메모리에 있는 Virtual DOM과 real DOM을 비교해서 차이점을 감지한 뒤 실제 DOM에다가 패치하는 방식. (필요한 변화를 반영) 필요한 변화만 발생시키게 되면서 업데이트를 어떻게 할지 고민을 안하면서 빠른 성능을 나타낼 수 있었다. UI를 어떻게 업데이트 할지X -> UI를 .. 2021. 7. 13. 이전 1 다음
