리액트는 무엇인가? 리액트를 한문장, 한단어로 설명할수 있기 라이브러리. 웹 어플리케이션의 디자인 패턴이라는 MVC 라는 것에서 V. 즉 View 라는 레이어를 담당하고 있는 라이브러리이다. 또는, User Interface 를 만들수 있는 라이브러리이다. 리액트의 중요한 컨셉 두 문장 말하기 컴포넌트 단위들로 이루어진 라이브러리이다. ...
Component 만들기 ☝ 요약본 컴포넌트 내부에 State 가 있다면 ▶ Class 함수 컴포넌트 사용 없다면 ▶ Function 컴포넌트 사용 컴포넌트 내부에 Life Cycle ( 라이프 사이클 ) 메서드가 있다면 ▶Class 함수 컴포넌트 사용
리액트 툴 기본 필수 툴들을 설치 프로젝트 구조를 이해하고 숨겨진 툴들에 대해 이해하기 추가 유용한 브라우저 개발툴과 VS Code 익스텐션 두가지 설치 터미널 노드 js git yarn Node.js JS 를 실행할수 있는 환경 npm 패키지 매니저 외부
프로젝트 만들기 ★ React 로 만드는 파일 : 소문자로 설정 + 파일 확장자명을 jsx 로 하자. ( 이렇게 해야, Vanilla JS 의 파일과 React 의 Component 들을 구분할수 있다. ) react-dom ▶ 라이브러리 ▶ React 같은 라이브러리들은 Babel 을 통해서 Vanilla JS 로 변환이 되는데, 이렇게 자바스크...
State ▶ 현재 상태의 값. 즉 현재 데이터라는 State의, 값(데이터 값)을 저장시키는 객체( Object )이다. ▶ 컴포넌트의 UI를 위한 데이터를 보관하는 객체 ( Object ) 인 State 가 업데이트(변경) 가 되면 자동적으로, render 함수
Props ▶ 부모로부터 상속받은 속성( property ) 으로, 컴포넌트 밖에서 주어지는 데이터이다. 컴포넌트 외부에서 데이터를 전달받는것들로, HTML 로 예를 들자면, 내가 사용하려는 컴포넌트의 외부에서부터 전달받은 Props 들이 attrubute 와, a
스프레드 문법 ▶ ... 의 형태로, 하나로 뭉쳐있는 여러 값들의 집합을 풀어헤치는 문법 분명히 말하지만, 문법이다. 연산자가 아니다. 그렇기 때문에 스프레드 문법을 사용한 결과값을 변수에 할당할수 없다. 배열에서 사용하는 경우 ▶ 배열 리터럴만으로 2개의 배열을 1개의 배열로 합칠수 있다. 예시1 스프레드 배열 예시2 image-2021...