React는 Component를 호출하고, Component는 React에게 HTML을 준다.그럼 React는, 컴포넌트가 리턴한 HTML로 VDOM을 만들고, VDOM은 DOM을 만든다. React이 Component를 호출했을 때 비동기 작업이 있다면, Component 안에서 비동기(async) 호출을 한다비동기 호출은 Server에 요청을 하고, Server는 컴포넌트에게 응답(Data)을 준다 응답을 주는데 100ms의 시간이 걸린다면?React가 Component를 호출했을 때, Component는 함수이기 때문에 호출 후 바로 리턴을 해야 하는데,Component에서 HTML을 리턴하는데는 5ms가 걸린다면? React가 Component를 호출하고 Component가 HTML을 Reac..
컴포넌트(Component)UI를 구성하는 독립적이고 재사용 가능한 코드 단위버튼, 입력 필드, 네비게이션 바컴포넌트 특징재사용성: 동일한 컴포넌트를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄임(DRY) 독립성: 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있음컴포넌트는 내부 상태와 외부에서 전달받은 데이터를 통해 동작을 제어하고 UI를 렌더링 함컴포넌트는 생명주기를 가지며, 생성, 업데이트, 제거의 과정을 거친다 리액트 컴포넌트함수형: React Hooks를 사용하여 생명주기 메서드를 구현클래스형(ES6 클래스): `componentDidMount`, `componentDidUpdate` 같은 메서드를 사용
JSX 코드 내에서 JavaScript 표현식을 사용하는 방법(Escape into JavaScript from JSX attributes)JSX는 JavaScript 코드 내에 마크업(HTML) 코드를 포함할 수 있게 해줌이때, 중괄호 { }를 사용하여, JSX 코드 내에서 JavaScript로 "탈출(이스케이프)"하여 변수나 표현식을 사용할 수 있음 return ( {user.name} // 자바스크립트로 이스케이프 한 부분 ); 중괄호{ } 안에 JavaScript 표현식(변수를 속성값으로 전달)을 넣으면, 그 값이 해당 위치에 렌더링 됨return ( ); src 속성에 user.imageUrl 변수의 값을 전달하여 이미지의 경로를 설정반면에 className="avatar"는 단순히..
함수 컴포넌트가 어떤 순서로 업데이트 되는지(재렌더링 되는지) 보면import { useState } from 'react';function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times );} count = 0 인 상태로 버튼이 보이고,버튼을 클릭했을 때 handleClick 함수를 호출하면, setCount함수에 count + 1을 넘겨주며 실행이때, 리액트는 업데이트 해야 하는 것을 알아차리고 다시 렌더링 한다.setCount함수에 count + 1을 넘겨주며, 실행되는 ..
https : 프로토콜www : 서브도메인myservice.com/ : 도메인users/room : 경로(path)웹 서버의 디렉토리 경로대부분 가짜경로 (없는데 있는 것 처럼 보이는 경로)? 이후에 쿼리 파라메타가 옴id=3 : 쿼리파라메타(키=값 형태, 공백안됨)여기에서, 이 값을 웹서버의 디렉토리 경로(users/room)로 줄 것이다 & : 쿼리파라메타 구분자s=sw : 쿼리파라메타# : 해시mainpos : 해시값서버로 전송되지 않는 값클라이언트(브라우저)의 자바스크립트 안에서만 사용되는 데이터현재 #(해시)라우팅은 사용하지 않음(서버에서 알 길이 없음)
리액트의 함수형 컴포넌트에서 상태를 사용하는 방법 : Hooks가상 돔의 메커니즘을 이용하여 setState()처럼 내가 제공한 함수(Hooks)를 이용해서 상태를 관리함수(Hooks)를 다시 호출하여 재렌더링 할 수 있음 useState(): 리액트가 제공하는 상태관리 로직 함수항상 2개의 값을 가지는 배열을 반환(2)[값, 함수]첫번째 인자: useState()를 호출할 때 주는 값이 들어감두번째 인자: useState()를 호출 할 때 주었던 값을 바꾸고 싶을 때 사용하는 함수클래스 컴포넌트에서의 setState()와 같은 역할을 함두번째 함수가 호출되면, 상태를 바꾸려고 한다는 것을 리액트가 알게 되고리액트의 재 랜더링 로직이 돌아갈 수 있도록 함import { useState } from 're..
React 버전 16.8 이전(리액트 훅 기능이 추가되기 전) 기준 리액트 안에서 상태를 다루기 위해서, 클래스형 컴포넌트를 사용함수로는 상태의 변화를 감지하여 브라우저를 다시 렌더링 할 수 있는 방법이 없었음 클래스는 생성자 함수로 인스턴스 객체를 만들 수 있고,객체는 값을 계속 유지하려는 성질이 있으므로,export class CounterClass extends React.Component { constructor(props) { // 1. constructor에 props를 주고, React.Component에 그 값을 넘겨야 함 super(props); // 2.명시적으로 props를 넘김 this.state = { count: 1, // 상태의 초기값 }; } o..
소스타임코드가 작성되는 시점 실행타임(런타임)코드가 동작하는 시점 런타임에서, 작성된 객체 안에 새로운 값을 넣어줄 때, 접근연산자를 사용한다. 객체 접근연산자 종류.(dot)[ ] braketconst obj = { id: 'clara',};obj.name = 'hyejin'; //name이라는 key를 생성 후, 'hyejin'이라는 값을 할당console.log(obj); //{ id: 'clara', name: 'hyejin' } 자바스크립트 객체의 동적바인딩(문법)동적으로 실행시간에 새로운 키에 새로운 값을 연결시킨다. 객체의 속성에 접근하는 접근연산자 2가지의 차이점console.log(obj['name'])// 'name'는 문자열// 값(데이터)이다.// 실행시간(런타임)에 값을 바꿀 수 ..
상태(state)변하는 것무엇에 따라 바뀌는 것 데이터(data)상수변하지 않는 값변하지 않는 특성🌱데이터(상수)를 바꾸고 싶어서, 변수라는 개념이 필요했다 변수 식별자varlet 블록스코프재선언 불가, 재할당 가능const블록스코프선언 시 초기화 안하면 에러(초기화까지 필수)재선언 불가, 재할당 불가 왜 const를 많이 써야 하나상태를 최소화하기 위해서재할당이 가능한 let을 사용하면, 불안전하기 때문(버그 생길 가능성 있음)🌱 변수를 쓸 때 const를 많이 쓰자
여러 값을 하나의 값으로 묶는 역할, 문법key와 value로 표현각각의 값을 콤마로 구분객체는 중첩이 가능하다 (중첩객체)let hyejin = { name: 'hyejin', // key: value gender: 'female', body: { tall: 150, foot: 230, blood: { rhPlus: true, type: 'AB', }, },}; 객체 안의 함수(메소드)let text = 'hello';console.log(text); // 'hello'console = { log: function(a){ ... }} console이라는 객체 안에 log라고..
