React JS는 바로 interactivity를 위하여 제작되었다!
interactive한 어플리케이션에서 하는 작업들 전부 event들을 감지(listen)하는 일이기 때문
-노마드 코더 리액트 강의 메모-
React JS는 자바스크립트로 작성한 element를 업데이트 해서 HTML로 번역한다.
= React JS가 결과물인 HTML을 업데이트 할 수 있다.
= 즉, "유저에게 보여질 내용을 컨트롤할 수 있다" 이것이 바로 React JS의 핵심!
바닐라 JS에서는
- HTML을 먼저 만들고,
- 그걸 Javascript로 가져와서 HTML을 수정한다 ex) getElementById( 'id' )
리액트 JS에서는
모든 것이 자바 스크립트에서 시작 → 그 다음에 HTML이 된다.
- 자바 스크립트로 element 생성
- 리액트가 그걸 HTML로 번역
0. react DOM
0-1) 리액트 JS의 기초
- react JS - interactive한 UI를 만들 수 있게 하는 엔진. (자바스크립트로 element 생성→HTML로 바꿈)
- react DOM - (실질적으로) React element들을 HTML의 body 영역에 두도록 해줌
<body>
<div id="root"></div> //ReactDOM이 React element들을 가져다놓을 곳
</body>
<script>
const root=document.getElementById("root"); // root div를 grab
const span = React.creatElement( "span", { props }, "Hello I'm a span" )
// root 안에 들어갈 이벤트 컨텐츠
// HTML 태그
React.Dom.render(span, root);
// render하여 (React element들을 root div 안에서) 유저에게 보여준다
</script>0-2) ReactJS 방식의 이벤트 리스너 사용법 on + event
- onClick: ( ) => console.log("im clicked");
- onMouseEnter: ( ) => console.log("mouse enter");
0-3) JSX
사람들이 더 이상 React.createElement 쓰지 않는 이유! (+Babel 필요함)
- 자바스크립트를 확장한 문법, HTML 문법과 흡사한 방식으로 React element를 만들 수 있게 함
- HTML과 생김새가 비슷해서, JSX로 React element를 만드는 게 개발자들 입장에서 편하다.
Bable로 다시 번역해주기
React.CreateElement 렌더링도 JSX 방식으로 바꿔보자 (일반적인 HTML 태그인 것처럼 포함시켜주기)
<script>
// div 태그를 렌더링하는 컴포넌트 (Title, Button 관련 코드 포함한)
const container = React.CreateElement("div", null, [Title, Button] );
ReactDom.render( container, root );
</script>↓↓↓↓ 위를 아래처럼 바꿔주기 ↓↓↓↓
생각해보기)
초기 렌더링 이후,
사용자에게 업데이트된 정보를 보여주려면 리렌더링 해야함
But 카운터 값이 12345.. 증가할 때마다 직접 리렌더링을? → useState! (자동 리렌더링)
1. useState : "state가 바뀌면 리렌더링이 일어난다"
modifier함수로 count 데이터를 업데이트 후
↓
컴포넌트 전체를 재생성(리렌더링)해 화면에 노출
const [counter, modifier] = React.useState( );
const [ 현재값 , 함수 ] = React.useState(0 //초기값 0);
└>현재 value를 수정(modify)하고 컴포넌트를 새로고침한다
2. Props : 컴포넌트에 데이터를 보내는 통로
props
부모 컴포넌트(App)로부터 자식 컴포넌트(count) 함수에게
↓
'인자'를 통해 데이터를 보내는 방법
*컴포넌트 = JSX를 리턴하는 함수
React.memo
props가 변경되지 않은 컴포넌트는 다시 리렌더링 되지 않도록 지정
propTypes
어떤 타입의 props를 받고 있는지 체크해줌
3. useEffects : 언제 코드가 실행될지 결정하는 방법
React JS의 작동방법 = "state를 변화시킬 때 컴포넌트(모든 코드)를 재실행시킨다"
useEffects( 실행시킬 코드 , [dependency] );
