2. JSX
사용자가 보는 어플리케이션 인터페이스는 여러 컴포넌트로 구성됨각 기능에 따라 컴포넌트 생성 -> 따로 파일 생성해 저장/작업첫 컴포넌트 생성MyComponent.js 파일 생성 후 초기 코드 작성export default MyComponent : 다른 파일에서 해당 파
event : 웹 브라우저에서 DOM 요소와 상호작용 리액트 Event 시스템 주의 사항 camelCase로 이벤트 이름 작성 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달 DOM 요소에만 이벤트 설정 가능 div, button, input,form, s
DOM 요소의 id public/index.html : id가 root인 div 요소 src/index.js : id가 root인 요소에 리액트 컴포넌트 랜더링 >리액트 컴포넌트 안에서 id 사용 가능 -> 권장 X 원칙적 : unique한 DOM의 id 문제 상황 발생 : 중복 id 가진 DOM 생성됨 ref 의 경우 : 전역적 작동 X, 컴포넌트 내...
JS 배열의 map() 함수 반복되는 컴포넌트 랜더링 가능 map() : 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 프로세싱 한 후 그 결과로 기존 배열을 새로운 배열로 생성 문법 callback : 새로운 배열 요소 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 arr...
라이프사이클 라이프사이클 접두사 will : 어떤 작업 작동 전 실행되는 메서드 Did : 어떤 작업 작동 후 실행되는 메서드 Mount DOM 생성되고 웹 브라우징에 나타남 Mount 할때 라이프사이클 컴포넌트 생성 constructor 컴포넌트 새롭게 만들 때마다 호출되는 클래스 생성자 getDerivedStateFromProps props에 있는 ...
함수형 컴포넌트 사용법 컴포넌트 생성시 마다 클래스와 그 안에 render 매서드 작성 번거로움 오직 props 전달받아 랜더링 하는 경우 함수형 컴포넌트로 간단하게 작성 순수 함수 이용한 컴포넌트 선언 화살표 함수와 비구조화 할당 문법 사용한 컴포넌트 선언 언제 함수형 컴포넌트를 사용할까 state, 라이프 사이클 등의 불필요한 기능 제거된 함수형 ...
create-react-app 버전 업데이트에 따라 별도의 설정 없이 사용가능 webpack의 css-loader를 이용해 일반 CSS를 불러오는 방식 사용 클래스 네임의 중복 가능성 방지 위해 다음과 같이 작성 방식 CSS Module 모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클레스 네밍릉 생성하며 scope를 지역적으로 제한하는 방식 ...