본문 바로가기
[React] Hook, useEffect 의존성 배열 useEffect 웹 사이트를 이용하기 위해 웹 브라우저에서 서버로 요청을 보내고 서버는 클라이언트에게 응답을 받는다. 이 과정에서 다른 외부 시스템과 연결되어 처리해야 할 다른 작업들이 있을 수가 있다. 예를 들어 외부 API가 사용되는 경우가 있는데 이럴 경우 컴포넌트는 클라이언트에게 응답을 끝내고 나서 이런 작업들을 처리하는 것이 바람직하는데 이럴 때 useEffect를 통해 쉽게 처리할 수가 있다. 렌더링 이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저는 서버로부터 HTML 문서를 다운 받는다 useEffect 문법 useEffect(setUp함수,[의존성 배열]) setUp함수 : 렌더링이 된후 사용되는 함수 의존성 배열 : useEffect가 작동되기 위한 의존하는.. 2023. 11. 18.
[React] Hook, useState Hook 이란 클래스 컴포넌트를 작성할 필요 없이 함수 컴포넌트에서도 state 관리와 생명주기, 메서드 등 다양한 기능들을 사용할 수 있는 개념 useState Hook의 종류중 하나로 리액트에서 가변적인 state변수를 관리할 수 있다. useState 문법 const [state, setState] =useState(초기값); state를 변수, setState를 변숫값을 변경시킬 수 있는 함수라고 생각하면 이해가 쉽다. useState를 사용하여 숫자를 변화시킬 수 있는 코드를 만들어 보았다. import { useState } from "react"; const App = () => { const [calculator, setCalculator] = useState(0); const onClic.. 2023. 11. 16.
[React] 리액트 Props Props Props는 자바스크립트 변수 또는 HTML 속성등을 컴포넌트로 넘겨 사용할 수 있는 인수와 비슷한 개념이다. 부모 컴포넌트에서 Props를 사용하여 자식 컴포넌트에게 값을 전달할 수 있다. Props 사용하기 여기 2개의 박스가 있는 컴포넌트가 있다. Box1과 Box2 컴포넌트에는 각각 파란색과 핑크색 배경화면을 속성값으로 가지고 있다. 부모 컴포넌트인 App.jsx에서 자식 컴포넌트들에게 Props를 사용하여 속성값을 전달하려고 한다. // App.jsx import Box1 from "./components/Box1"; import Box2 from "./components/Box2"; const App = () => { return ( ); }; export default App; /.. 2023. 11. 15.
[React] 리액트 컴포넌트 리액트 파일구조 리액트는 크게 public 폴더와 src 폴더로 구분할 수가 있다. public 폴더는 정적파일들이 위치해 있다. 예) HTML 파일, 이미지 파일 src 폴더는 동적파일들이 위치해 있는데 주로 사용하는 파일은 .js 또는 .jsx파일이다. 둘 중 아무 파일이나 사용을 해도 상관은 없다. 컴포넌트 란? Component는 웹 페이지 구성요소들을 재사용이 가능한 독립적인 코드 덩어리라고 표현할 수 있다. 자바스크립트 언어에서 함수의 개념과 비슷하다. 컴포넌트들이 모여 하나의 웹 페이지를 구성한다. 웹 페이지에 Box1, Box2, Box3라는 세 개의 박스를 컴포넌트를 구현하지 않고 한 파일에서 구성해 보았다. 만약 저 세 개의 박스에 각각 다른 기능들이 들어 있다면 그 기능들을 구현하기 .. 2023. 11. 12.
[React] 리액트, 리액트 설치하기 리액트란? 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. 싱글 페이지 애플리케이션 개발에 사용이 되고 Virtual DOM과 JSX 개념을 사용하며 동작합니다. 그리고 컴포넌트 개념을 사용하여 UI 개발을 좀 더 수월하게 해 줍니다. 리액트 설치하기 https://create-react-app.dev/docs/getting-started/ 리액트를 설치하기 전에 Node.js를 먼저 설치가 선행되어야 한다. 터미널에 다음 명령어를 입력한다. npx create-react-app my-app my-app은 설치할 리액트 관련 파일들이 저장될 폴더 이름이다. 지금 현재 위치하고 있는 폴더에 설치를 하고 싶으면 다음 명령어를 입력하면 된다. npx create-react-app . 터.. 2023. 11. 12.
[비트코인] 블록의 구조 블록의 구조 블록은 거래 묶음의 단위라고 이전 포스트에서 설명을 하였다. 블록을 자세하게 보면 크게 헤더와 바디로 나뉜다. ● Block Body 바디는 거래내역들이 저장되어 있는 영역이다. Transaction #1, Transaction #2 등이 해당된다. ● Block Header 헤더는 거래내역들에 대한 정보 및 블록 관련 정보들이 있는 영역이다. 버전(Version) : 클라이언트의 소프트웨어 버전 타임스탬프(Timestamp) : 블록의 생성시간 난이도(Bits) : 해당 체인의 난이도를 표현하는 값 논스(Nonce) : 채굴 과정에서 계속하여 변화되는 값 머클블록(Markle Block) : 바디에 포함되어 있는 거래내역들의 정보를 담고 있다. 머클루트라고도 불리기도 한다. 이전 블록 해시.. 2023. 10. 25.

티스토리툴바