solsol

State란? 함수 내에 선언 된 변수처럼 컴포넌트의 렌더링 결과에 영향을 주는 데이터를 가지고 있는 객체 useState함수는 리액트의 Hooks 중 하나 import react Hooks의 useState는 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공해 준다. useState를 사용하기 위해서는 react에서 useState를 import 받아야 한다. 변수선언 state의 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState 라는 두가지 요소를 배열 형태로 리턴해준다. state 명은 알맞게 설정하고 두번째 요소에 set을 붙여주면 된다. 변수 재선언 state의 값을 변경하려면 setState 함수를 불러서 ..

*CMD 창에서 프로젝트 생성하기 *VsCode 터미널에서 yarn add react-router-dom yarn add styled-components yarn add axios 설치하기

newsapi API 키 발급받기 이번 프로젝트에서는 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러온 후 보여 줄 것이다. https://newsapi.org/login?ReturnUrl=%2faccount Login - News API newsapi.org -components 폴더 생성 -NewsItems.js, NewsList.js 파일 생성 뉴스 뷰어 UI 만들기 NewsItem 만들기 각 뉴스 데이터가 지니고 있는 정보는 JSON 객체 -title : 제목 -description : 내용 -url : 링크 -urlToImage : 뉴스 이미지 -NewsItem 컴포넌트를 article 객체를 props로 통째로 받아서 사용 -a 태그의 rel 속성은 현재 문서와 링크 문서의 연관..

News.js 파일 생성 import { useState } from "react"; import axios from "axios"; const News = () => { const [data, setData] = useState(''); const onClick = () => { axios.get("https://newsapi.org/v2/top-headlines?country=kr&apiKey=ffbbc82f694941a7b0e2d4f4515abcc7") .then(response => { setData(response.data); }); }; return ( 서버 정보 불러오기 {data && } ); }; export default News; App.js 파일에 News 추가 import './A..

Router 설치 1. PowerShell로 Router 설치 2. vsCode 새폴더로 kh-router-ex 열기 3. vsCode 터미널에서 yarn add react-router-dom 입력 프로젝트로 라우터 적용 -src 폴더 밑에 pages 폴더 생성 -js 파일 생성 (Home.js, About.js, Setting.js) App.js에서 라우터 이동경로 생성 import './App.css'; import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Setting from './pag..