유튜브강의

사용자 경험이 좋아진다.데이터와 화면의 일치재사용 컴포넌트 사용 매개변수들의 내용에 따라 어떤 태그를 만들어주는 역할을 담당ex)두 리턴 결과는 같은 결과이다. 렌더링하여 처리하는데 첫번째 매개변수는 어떤 태그(컴포넌트)이고 두번째 매개변수는 해당 부분이 붙을 대상이다

JSX는 babel을 통해 createElement로 바뀐다바뀌는 개념들은 state로 등록안바뀌는 개념들은 Tag로 등록return 뒤에는 소괄호()를 넣어 태그간의 라인을 맞춰준다single태그는 JS와 다르게 리턴할 때 <input/> 처럼 /를 붙여야한다.

여러 js파일을 한방에 합치는 기술 + babelNode.js => JS 실행기React를 할때는 Node.js를 알아야한다. => JS 실행기를 알아야한다. webpack.config.js 파일 추가 후 modules.export { ... } 작성npx create

기본적인 modules좀 더 복잡한 module기본으로 실행할 경우 최신 코드를 옛날 모든 브라우저에서 적용시킬 코드로 만든다이는 시간이 많이 걸리고 만약 어떤 대상까지만 지원한다고 설정하면 필요없는 시간도 줄이고 효율적으로 작업할 수 있다. 이를 위해 @babel/

dist 폴더 ( webpack을 통해 app.js가 만들어진다 )client.jsx - 여러 jsx파일 모으는역할package.jsonpackage-lock.jsonwebpack.config.js - webpack 동작 과정 시 설정 내용WordRelay.jsx -

return 안에 jsx로 이런식으로 {}안에 map을 동작시켜 태그를 리턴한다리액트가 key를 기준으로 엘리먼트 추가/수정/삭제 등을 판단하고, 같은 컴포넌트의 여부를 판단하여 성능 최적화하는데 사용된다.key 값을 임의로 index로 설정하는 경우가 있는데 배열의

바인드하는 함수에서 사용하는 this의 대상을 지정해주는 역할이다.objA.aFunc 메서드에서 사용하는 this는 objB로 처리가 된다. 이를 통해 foo()를 실행하면 a가 아닌 b가 나온다.버튼 클릭시BindTest {props: {…}, context: {…}

크롬 확장프로그램으로 react를 보는데 F12의 element에 비해 더 좋다. 이런식으로 컴포넌트를 확인할 수 있고 오른쪽에 state에 대한 것도 확인이 가능하다. 해당 톱니바퀴를 누르고 Highlight를 체크하면렌더링에 대한 바뀐 부분들을 확인 할 수 있다.

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환useState와 다르게 값이 바뀌어도 return 부분의 jsx가 렌더링이 진행되지 않는다. 추가로 렌더링이 되어도 동일한 참조값을 유지하기 위하여 사용한다. 컴