728x90 반응형 웹/24-StudyWithPnP17 [React.js] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. [React.js] 3주차 - React.js 입문(1) 1. React 컴포넌트리액트에서는 HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 보통 함수의 이름을 따서 부른다. 컴포넌트는 함수 선언식이나 화살표 함수를 사용해 만들 수 있다. 컴포넌트를 만들 때 컴포넌트 이름의 첫글자는 꼭 대문자로 적어줘야 하는데, 그렇지 않으면 리액트 내부적으로 컴포넌트로 인식하지 않기 때문이다. // 함수 선언식function Header() { return ( header );}// 화살표 함수const Header = () => { return ( header );} 2. JSX (JavaScript Extensions) 리액트는 jsx 즉, 확장된 자바스크립트의 문법을 사용하기 때문에 자바스크립트에서는 불가능.. 2024. 10. 14. [React.js] 1주차 - Node.js, React.js 1. Node.js 1.1. Node.js 와 javascript자바스크립트 실행 환경(Run Time) = 구동기자바스크립트는 웹 내부에 필요한 간단한 기능만을 개발하기 위한 스크립트 언어였지만, node.js 로 인해 더 많은 걸 할 수 있게 됨1.2. 패키지 (pakage) 일반적으로 프로젝트가 특정 목적을 갖는 프로그램의 단위라면 node.js 에서는 패키지라는 단어를 프로그램의 단위로 사용한다. npm(node pakage manager)으로 패키지를 쉽게 설치하고 관리할 수 있다. 2. 모듈 (Module)기능 별로 나누어진 파일Javascript 의 모듈 시스템: Common JS(CJS), ES Module(ESM) 2.1. Common JS (CJS)function add(a, b) .. 2024. 10. 7. [React+JS/리액트] 웹 스터디 - state 변경함수 사용할 때 주의점: async 자바스크립트는 일반으로 코드를 작성하면 synchronous 하게 처리된다. 코드를 적은 순서 그대로 위에서부터 아래로 코드가 실행된다는 뜻이다. 그런데 어떤 코드들은 synchronous 하지 않게 실행되는 코드들이 있다. ajax, 이벤트 리스너, setTimeout 이런 함수들을 쓸 때 asynchronous, 즉 비동기적으로 코드가 실행된다. 이런 함수들은 보통 처리시간이 길다. ajax 로 예를 들면 인터넷 상황이 안 좋으면 코드 실행이 오래걸리는 것을 생각하면 된다. 그래서 이런 코드들은 순차적으로 실행되지 않고 완료되면 실행이 된다. 아래 코드를 실행시키면 2 4 가 순서대로 출력되고, 그 다음에 3이 출력된다. 이는 3을 출력하는 코드가 asynchronous 처리를 지원하는 코드이기 .. 2024. 8. 6. 이전 1 2 3 4 5 다음 728x90 반응형
