UI(User Interface) 구축을 위해 페이스북에서 만든 JavaScript Library다.싱글 페이지 어플리케이션(SPA) or 모바일 어플리케이션 개발에 사용된다.단방향 데이터 바인딩(One-way Data Binding)가상 돔(Virtual DOM)
React ? > UI(User Interface) 구축을 위해 페이스북에서 만든 JavaScript Library다. 싱글 페이지 어플리케이션(SPA) or 모바일 어플리케이션 개발에 사용된다. 단방향 데이터 바인딩(One-way Data Binding) 가상 돔(
React SPA를 빠르게 개발할 수 있게 만들어진 툴 체인이다FE 개발 툴nodejs 패키지 필요바벨 JSX를 JS로 변환Jest 테스트돕는Post CSS css transfiler모듈 번들러 다양한 패키지를 묶어주는웹펙
상향식(bottom-up) - 컴포넌트 먼저 만들고 조립하기테스트가 쉽고 확장성이 좋다컴포넌트 사용 중 컴포넌트 내부에서 변하는 값ex) 나이, 현재 사는 곳, 취업 여부, 결혼 여부useState결과물!codesandboxcheckbox-forked-tbix4o?fo
Same-Origin Policy 동일 출처 정책같은 출처(Origin)의 리로스만 공유가 가능하다프로토콜 다른 경우 ( https / http )https://www.codestates.com vs http://www.codestates.com⇒ 두
Component Driven Development상향식 개발컴포넌트 단위로 만들어서 페이지를 레고처럼 조립하는 개발 방식재사용 가능한 UI 컴포넌트디자인, 개발단계에서부터 재사용 가능한 UI 컴포넌트를 고안한다면,이후에도 새롭게 만드는 것이 아닌, 재사용할 수 있게
useState 변화 => 렌더링 => 변수 값 초기화 됨useRef 변화 => 렌더링 안함 => 변수들의 값 유지useState 변화 => 렌더링 => ref의 값 유지<input> - focus()media playback - play(), pause(),
미리보기open/close - useState로 상태 변경조건부렌더링 - open상태만 modal컴포넌트 렌더링on/off - useState로 상태 변경조건부 렌더링 - on상태일 때 className 추가현재 탭 - useState로 인덱스 상태 저장탭 li - m
onClick: 사용자가 클릭했을 때 발생하는 이벤트버튼 클릭 시 input에 입력한 내용을 alert로 알림 창 띄우기OnClick={alert(name)}alert 함수를 바로 호출시, 컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적
1. 무료버전 한번에 설치 패키지명 @fortawesome 오타 아님! 그대로 설치! free라고 붙은 것만 무료고 pro는 2. 따로 설치하기 기본 패키지 설치 regular solid light duotone brand 폰트어썸 아이콘 검색