THE VALUE

[ fetch ] api 형태로 데이터를 가져올 때 사용 api 호출 후 받아온 데이터를 json 형태로 출력하여 사용하게 된다. fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); [ fetch를 활용하여 코인 정보 가져오기 ] - fetch를 이용하며 코인 정보를 받아와서 select box에 리스트를 출력 - input box에 값을 입력하거나 select box의 변경 이벤트가 있을 경우 입력한 값과 코인의 값을 통해 환산 정보를 화면에 출력 import { useState, useEffect } from "react"; function App() ..

useState를 이용하여 배열 변수를 처리하는 방법에 대해서 공부 useState를 이용하여 배열을 선언하고 해당 배열에 input text 에서 입력한 값을 하나씩 추가하여 넣는 방법으로 TO DO 리스트가 화면에 출력되도록 처리해본다. ...배열명 setToDos((currentArray) => [toDo, ...currentArray]); * setToDos 와 같이 변경 함수에는 변수 및 함수를 파라미터로 지정할 수 있다. 현재 배열의 맨 앞 요소에 새로운 item(값)을 push import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDo..

컴포넌트에 이벤트 발생 시 / state에 변화를 감지한 경우 컴포넌트는 다시 그려짐 (리랜더링) 반복되는 랜더링을 방지하고자 사용하는 문법 - 아래 예제는 콘솔 로그가 버튼 클릭 때 마다 호출이 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((current) => current + 1); console.log("render"); return ( {counter} Click Me!! ); } export default App; [ useEffect ] 컴포넌트가 랜더링 될 때 특정 작업을 수행하도록 설정하는 hook (리액트 문법..

앞서 진행한 CDN 라이브러리 방식이 아닌 create-react-app 명령어를 이용하여 신규 폴더를 생성 create-react-app 폴더 이름 프로젝트 내에서 컴포넌트를 분할하고 분할한 컴포넌트에 각각의 스타일링을 입히기 위해 css 파일을 분할하여 사용하는 방법에 대한 예시 [ App.js ] App.js 파일에서 사용할 css 파일을 생성 후 import className을 통해 클래스명을 지정하여 특정 요소만 스타일이 적용되도록 처리함 import Button from "./Button"; import styles from "./App.module.css"; function App() { return ( Welcome Back! ); } export default App; [ PropType..

[ Props ] 부모 컴포넌트로 부터 자식 컴포넌트로 전달되는 object 형태의 파라미터를 말하며, 공통으로 만들 버튼 등의 자식 컴포넌트를 작성한 후 파라미터로 props를 전달 받아 버튼 텍스트 등 서로 달라지는 값들만 체크하여 각각의 컴포넌트를 화면에 출력한다. [ memo ] 컴포넌트의 이벤트가 발생하거나 값이 변경되지 않는 컴포넌트에 대해서 리랜더링을 하지 않기 위해서 사용하는 문법 아래 코드의 Btn 2개의 컴포넌트 중 props 가 고정되어 있는 경우 / 변경되지 않는 경우의 2번째 컴포넌트는 이벤트 발생 후에도 리랜더링이 되지 않아서 메모리 등의 자원을 낭비하지 않을 수 있다. React.memo() [ PropTypes ] 자식 컴포넌트로 전달되는 prop의 값의 타입이 부정확한 경우..

[ State ] - useState Hook 컴포넌트의 내부에서 변경 가능한 데이터를 관리할 때 사용 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용되는데 예제를 보면 다음과 같다. React.useState는 배열 형태의 객체를 반환 첫번째 요소는 변경될 값을 관리할 변수 - counter 두번째 요소는 이벤트 처리를 위한 함수 - setCounter counter 이름의 변수에 0으로 초기화한 데이터를 저장하고 setCounter 이름의 함수를 통해 값을 변경하면서 화면에 값을 리렌더링(다시 그리기) 하는 과정을 거침 특정 값에 대한 state 관리를 통해 화면에 변경되는 이벤트를 처리 여러개의 컴포넌트를 결합하여 화면에 리랜더링하는 예제 {} 안의 삼항연산자를 통해 셀렉트박스에서 ..

[ JSX ] Javascript 언어에 XML을 추가하여 확장된 문법으로 리액트 프로젝트를 개발할 때 자주 사용되는 문법 Babel이란 도구를 이용하여 일반적인 자바스크립트 형태로 변환된 후 브라우저에서 실행이 됨 일반적인 자바스크립트 문법과 HTML 문법이 혼용되어 사용됨 https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io JSX 문법으로 작성된 코드를 일반 자바스크립트 형태로 변환해볼 수도 있으며, 라이브러리 문서를 확인할 수 있는 사이트 리액트 문법을 통해 컴포넌트를 생성하여 화면에 렌더링 하는 방식에서 JSX 문법을 통해 ..

이번 프로젝트의 마지막 화면으로 앞서 만든 게시판과 유사한 성격을 취하지만 아래의 기능이 더 포함되어 있음 1. 로그인한 일반 사용자가 글을 등록할 수 있다. 2. 답변 (댓글)을 등록하고 수정, 삭제할 수 있다. [ CommunityController.java ] 경로 ) src\main\java\com\info\fastboard\community\controller\CommunityController.java package com.info.fastboard.community.controller; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.spring..