1. SPA Single Page Application 단일 웹 페이지로 돌아가는 애플리케이션 (ex. index.html) 브라우저에서 자바스크립트를 이용하여 단일 웹 페이지의 상위 HTML 요소를 동적으로 생성 및 조작 검색 엔진 최적화 (SEO)에는 적합하지 않음 [ 특징 ] 대표적인 SPA라이브러리 : React.js, Vue.js, Augular2 등 컴포넌트들이 모여 하나의 페이지를 작성하고, 이후 특정 부분만 데이터를 바인딩하는 개념 [ 장점 ] 사용자 친화적 초기에 한 번의 렌더링 후, 데이터만 받아오기 때문에 상대적으로 서버 요청이 적음 FE와 BE의 분리로 개발 업무의 분업화 및 협업에 용이 효율적인 개발을 할 수 있도록 함 [ 단점 ] 처음 화면을 로딩할 때, 모든 화면이 미리 준비되..

1. 일반 CSS 일반적으로 우리가 알고 있는 바로 그 CSS 소규모 프로젝트에 적합 별도의 라이브러리 필요 X 1.1 주의사항 CSS 작성 시 컴포넌트 별 클래스가 중복되지 않도록 작성하는 것이 중요 1) 클래스 생성 규칙 클래스의 이름을 생성할 때 중복되지 않도록 특정한 규칙을 정해둘 수 있음 이름-태그의 형식과 같이 규칙을 정할 수 있음 ex) App 컴포넌트에 헤더를 생성 => App-header 2) CSS Selector DOM트리 구조를 통해 원하는 DOM을 참조하여 꾸밀 수 있음 ex) .App .logo { ... } 1.2 CSS 모듈 사용 CSS의 모듈 형식을 사용하면 자동으로 클래스명이 생성 CSS의 파일명을 컴포넌트명.module.css로 생성 -> 사용하려는 js 파일에서 imp..

1. Component란? React에서 컴포넌트는 프로그램을 이루는 최소한의 단위 자바 스크립트에서의 함수와 유사 컴포넌트의 이름은 대문자로 시작되도록 함 컴포넌트를 통해 UI를 여러 개의 조각으로 나눈 뒤, 재사용이 가능하도록 함 각각의 조각들을 개별적으로 관리할 수 있도록 함 2. Component의 구분 2.1. 함수 컴포넌트 - function으로 정의 - return 문에 JSX 코드를 반환 함수 컴포넌트를 작성하는 방법은 function 사용 유무에 따라 다시 2가지로 나뉜다. 1) function 함수 사용 밑줄 친 부분은 함수 컴포넌트로, 해당 함수를 따라가서 살펴보면 function App() { return ( Hello ); } 이렇게 function으로 App 함수를 정의하고 있으..

1. Props Properties의 줄임말 속성을 나타내는 데이터 함수의 매개변수와 같이 컴포넌트끼리 값을 전달 읽기 전용으로, 컴포넌트 내부에서 값 수정이 불가 가장 중요한 마지막 특징을 살펴보자. function sum(a, b) { return a + b; } 위와 같은 간단한 함수를 보면 입력되는 값이 컴포넌트 내부에서는 바뀌지 않고 있다. 이는 즉, 더한 값이 리턴되지만, a와 b 자체의 값은 변하지 않는다는 것을 의미한다. 이러한 함수를 pure function 이라고 부른다. function withdraw(account, amount) { account.total -= amount; } 반대로 여기 이 함수를 보면 amount의 값이 함수 내부에서 바뀐다는 것을 볼 수 있다. amount..

JSX란? React에서 component는 꼭 저런 형식으로 작성이 되어야 하는데, 이 때 Javascript와 HTML이 합쳐진 문법 일종의 자바스크립트의 확장된 문법 JSX는 React로 개발할 때 주로 사용이 되며, 공식 자바스크립트의 문법이라고 할 수는 없음 JSX의 작성 방법 Javascript 언어 사용 JSX 내부에서 Javascript 언어를 사용하기 위해서는 { }로 코드를 감싸주어야 한다. div로 요소 묶기 하나의 컴포넌트 안에 여러 개의 요소가 존재하면 div 태그로 묶어주어야 한다. // 잘못된 코드 function App(){ return( Hello bad code ) } // 올바른 코드 function App(){ return( Hello good code ) } 조건 연..

앞서 작성한 프로그램 생성 법과 유사한 내용이지만 너무 간단하게 적었나 싶어 조금 더 자세하게 !! 과정을 한 번 더 작성한다. 1. create-react-app ?! - React를 만든 페이스북에서 제공하는 CLI 도구 (CLI : 커맨드 라인 인터페이스) - React를 사용해 프로젝트를 개발하고자 할 때, 아무것도 없는 상태에서 시작하는 것이 아닌 기본적인 틀을 잡아줌 2. 프로젝트 생성 npx create-react-app [ 프로젝트 이름 ] cmd에서 폴더를 만들 위치로 이동한 뒤,, 위에 보이는 명령어를 한 줄만 작성하면 끝이다! 그런 다음 기다리면 요렇게 진행 상황이 보여지고.. 조금만 더 기다리면..! 짠~~! 이렇게 프로젝트의 틀이 만들어진 것이다!! 이렇게 간편하게 만들어지다니 놀..

1. ReactJS 프로그램 생성하는 법 cmd 창에서 파일을 생성하려고 하는 저장소로 이동 후 하단 명령어 입력 npx create-react-app [ 프로젝트 이름 ] VSCode 에서는 터미널에서 npm start 명령어를 통해 프로그램을 실행 App.js import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target..

https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co

modifier 함수를 가지고 state(setCounter)를 변경할 때 react에 의해 컴포넌트(function)가 재생성됨 (새로운 값을 가지고 리렌더링) 코드가 실행되는 과정 : 1. 버튼을 누르면 counter가 1이 됨 2. console.log(1), Total clicks: 1이 됨 3. 이는 컴포넌트 자체가 재생성 된 것임 4. 데이터(setCounter)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것 바닐라 js를 대체 HTML요소를 생성하거나 찾을 필요 X 이벤트 리스너를 더해줄 필요 X UI 업데이트 필요 X -> return 안에서 HTML을 바로 생성해버렸고, 거기에서 바로 이벤트 리스너를 더해줬고, UI를 업데이트 하면 자동으로 리렌더링 됨 state를 바꾸..

어플리케이션 시작 시 counter = 0 26번째 줄 render함수 실행 render 함수는 Container 컴포넌트를 root에 담아줌 어플리케이션이 막 시작되었을 때의 Container은 Total click을 가지고 있으며, counter과 연결되어있음 (20-22줄) onClick 이벤트 리스너를 통해 버튼 클릭 시 {}안의 countUp 함수가 호출 countUp함수는 counter을 증가시키고 다시 render을 호출 render 함수 호출되면 같은 과정 반복 (3. Container을 root에 넣기) 다시 반복하면 이번 Container 컴포넌트는 업데이트 된 counter을 가지고 있음 근데 이 과정은 복잡하다는 단점이 있긴 하다 :( https://nomadcoders.co/rea..