1. Component 리액트는 컴포넌트 기반의 구조이다. 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 에어비앤비 페이지처럼 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성한다. 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성하기 때문이다. 리액트 컴포넌트의 입력은 props가 되고, 출력은 React element가 된다. 2. Props 리액트 컴포넌트 입력으로 들어가는 props에 대해 살펴보자 prop은 property(속성)라는 영어단어를 줄여서 쓴 것이다. 즉, prop은 react 컴포넌트의 속성이다. 마치 붕어빵에 들어가는 재료와 같다. 같은 붕어빵이라도 어떤 맛을 넣냐에 따라 다른 맛이 난다. 에어비앤비 컴포넌트도 겉은 같은 모습이지만, 안에 들어가는 정보에 따..
1. Elements 엘리먼트란 리액트 앱을 구성하는 가장 작은 블록들이다. 엘리먼트의 형태는 다음과 같다. createElement를 적용하면 위와 같이 변환되는 것이다. 리액트 엘리먼트는 실제로 우리 눈에 보이는 것을 기술한다. 또한 돔 엘리먼트와는 다르다. 돔 엘리먼트는 가상 돔의 엘리먼트를 의미한다. 2. Elements 특징 1) 불변성 한 번 생성된 엘리먼트는 변하지 않는다. 즉 엘리먼트 생성 후에는 attributes나 children을 바꿀 수 없다. 마치 붕어빵과 같다. 구워진 붕어빵 속은 바꿀 수 없다. 그렇다면 화면에 변경된 엘리먼트를 보여주기 위해선 어떻게 해야할까? 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성하면 된다. 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바..
1. node_modules npm에서는 외부 모듈들을 다운받고 관리해준다. 다운 받은 외부 모듈들이 node_modules에 들어간다. 2. package.json 프로젝트의 설정들이 들어간다. 외부 모듈을 다운받으면 dependencies에 모듈명과 버전들이 기입된다. 외부 모듈 다운 시 package.json에 모듈 정보가 기입되고 node_modules에 특정 모듈이 설치된다. scipts에 start부분을 보면 react-scripts start가 있는데, 이는 우리가 리액트를 동작시키기 위해 npm start를 치면 해당 코드가 동작하는 것이다. 3. public > index.html public은 주로 이미지 파일을 추가할 때 사용한다. src폴더에서 코딩을 하게 될 것이다. css, js..
1. 기본지식 1) node.js 자바스크립트는 브라우저에서만 실행되는 언어였다. 점점 자바스크립트가 널리 사용되면서 '웹 개발 말고 다른 곳에서도 사용할 수 있지 않을까'라는 이야기가 나오게 되었다. 그래서 브라우저에서 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js이다. node.js는 서버 프로그램을 개발할 때 많이 사용된다. node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드 도구 (Babel, webpack)을 이용해서 브라우저가 이해할 수 있는 언어로 바꾸주는 작업이 필수적으로 들어간다. 2) npm node package manager의 약자로 node 프로젝트의 패키지(외부 라이브러리)를 관리해주는 저장소 역할을 한다. 브라우저의 경우 자바스..
