전체 글349 React(25) 리액트 훅 useEffect란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. useEffect 함수형 컴포넌트 안에서 useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?) useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다. 그래서 클래스형 컴포넌트의.. 2021. 3. 5. JavaScript - 동기(Sync)와 비동기(Async) Updated 2021/05/14 자바스크립트는 싱글 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일만 처리할 수 있다. 그러므로 자바스크립트는 동기 방식으로 진행이 된다. 하나의 호출 스택만 있어 함수를 순서대로 줄세우고 하나씩 처리한다. - 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식 - 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식 자바스크립트에서 비동기가 필요한 이유 웹 페이지를 로딩할때, 우선 웹 페이지의 기본 레이아웃을 보여주고 보여줄 수 있는 것만 우선 보여주는 것이 더 바람직할 것이다. 사용자가 지루하지 않도록 먼저 떡밥을 던저주는 것이다. 자바스크립트에서 비동기방식을 사용하는 방법 비동기적 callback 함수 사용 ES6 Promis.. 2021. 3. 5. React(24) 리액트 훅 useState란 Updated 2023/02/23 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? 사용자가 웹에서 뭔가 클릭도하고 입력도 하고 이것저것 하면서 일어나는 모든 동작이 상태라고 뭉뚱그려 이해를 하였다. 웹이랑 사용자랑 데이터로 핑퐁하는 와중에 당연히 값을 데이터에 넣어서 보내겠지. 그게 상태값인 것 같다. useState - useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다. - 하나의 useState 함수는 하나의 상태 값만 관.. 2021. 3. 3. http와 https의 차이 URL과 HTTP URL은 웹사이트 주소와 동일하게 생각할 수 있지만 다르다. URL은 웹사이트주소를 포함하는 더 큰 개념이다. 그래서 URL에 접속할때는 맞는 프로토콜을 사용해야 한다. HTTP는 웹브라우저를 사용해 접속한다. HTTP(HyperText Transfer Protocol) 인터넷에서 웹서버 - 웹 브라우저 사이 텍스트 문서를 전송하기 위한 통신규약이다. 즉, 하이퍼텍스트(HyperText)를 전송(Transfer)하기위한 통신규약(Protocol)이다. → 바로 이때 !! 모든 데이터를 텍스트로 주고 받아 보안상 원치않는 데이터 유출이 발생할 수 있다. 더보기 HTTP 서버는 기본 80번 포트에서 서비스 대기 중이며 ↓ 클라이언트(웹브라우저)가 TCP 80 포트를 사용해 연결하면 ↓ 서버.. 2021. 3. 2. React(23) 리액트 훅이란? side effect를 알아야 react hook개념이 이해가 되고 그 hook 안에 useState와 useEffect가 속해있는 것이다. 01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 sid.. 2021. 2. 25. JavaScript - var / const / let 세 변수의 차이점 자바스크립트의 변수선언 방식에는 var, let, const가 있다. 이 차이를 알아보자 var 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 같은 변수를 여러번 선언하면, 에러가 나야 하는데 어디서든 사용가능하다. 그래서 코드가 길어지면 처음에 사용한 변수명을 잊어버리고 실수로 같은 것을 쓰기라도 하면 꼬이게 된다. var name = 'JS'; // 처음에 선언하고 name = 'React'; // 재할당(그위에 다른 값 덮어씌우기) 가능하다. var name = 'Java' // 모든게 다~~가능 그래서 ... !! ES6 이후, 이를 보완하기 위해 추가 된 변수타입이 let 과 const 이다. (immutable 여부의 차이, 즉 변경가능하냐 아니냐) let 은 변수에 재할당이 가능하다. l.. 2021. 2. 24. 이전 1 ··· 47 48 49 50 51 52 53 ··· 59 다음 반응형
