Front-End14 [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. 이전 1 2 3 4 다음
