반응형 Web Front 개발공부/React.js13 리액트 훅 , 생명주기 import { useState } from "react";function App() { const [count, setCount] = useState(0); return ( setCount(count+1)}>증가 {count} setCount(count-1)}>감소 );}export default App; 간단한 프로그램이다.증가를 누르면 가운데 숫자가 1씩 증가하고, 감소를 누르면 1씩 감소한다. 2019년 2월 이전에는 Hook이 없었다.Class 방식에서는 생명주기가 따로 있었고 클래스형에서는 setState 방식으로 사용했다. 클래스방식 함수에 대응되는 use... 함수들이 존재하므로 염두해두고 공부하고자 기록해논다. 2024. 5. 25. 간단한 GitHub 조회 프로그램 예제 요즘 리액트에 관심이 많이 생겨서 틈틈히 공부하는 중입니다.토요일 아침 간단한 GitHub api 를 이용한 조회 프로그램을 만들어 봄. 소스import React, { useState } from "react";function App() { const [keyword, setKeyword] = useState(''); const [data, setData] = useState([]); const fetchData=()=>{ fetch('https://api.github.com/search/repositories?q=${keyword}') .then(response => response.json()) .then(data => setData(data.items)) .catch(e.. 2024. 5. 25. 페이지 라우팅 라우팅이란? 라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어다. "경로를 진행하는 과정"이라고 이해하면 되겠다. IT 개발자들은 프로젝트를 참여해 진행하다 보면 네트워크 라우팅이라는 말을 자주 듣게 된다. 사실 라우팅은 반드시 IT네트워크 만을 의미하지는 않으며, 상당히 포괄적인 개념이다. 개념 라우팅은 일상생활에서 쉽게 접할 수 있다. 미국에 살고 있는 친구에게 스마트폰 메세지를 를 보낸다고 하면 내 폰에서 친구 폰으로 디렉트로 정보가 전달되는 것이 아니라 중간중간 설치된 "라우터"라는 장비를 거치게 된다. 라우터를 거치는 이유는 데이터를 한 번에 전송하기에는 물리적 거리가 멀다. 쉽게 직행 노선이 존재한다면 좋겠지만 직행을 이용하는 횟수가 적다면 굳이 직행 노선을 만들 이유가.. 2024. 3. 30. 리액트 useReducer 2024년 새해. 진지하게 리액트 공부를 시작했다. Hook은 낚아채다는 뜻이다. 프로그래밍에서는 어떤 시점에 일어나는 순간을 인지하고 프로그래머가 그 지점에 원하는 기능을 구현하는 정도로 이해해도 될듯하다. 리액트에서 Hook 으로 불리는 카테고리 안에는 많은 기능들이 존재하는데, 이번 포스팅은 useReducer 다. 리덕스와 거의 비슷한 기능이지만 리덕스를 본격적으로 공부하기 전에 연습하고 기억해두려고 한다. 페이지 상단에 임포트하고 import React,{useReducer} from "react"; 사용할 펑션을 구현한다. 리액트는 변수와, 그 변수를 컨트롤하는 함수 패턴. useState도 동일. function reducer(state, action){ //action.type 값에 따라 .. 2024. 1. 27. 리액트 State 요즘 리액트 공부에 푹 빠져 있다. 오늘은 state에 대한 내용으로 정리를 해두고자 한다. import "./App.css"; import { Component } from "react"; import TOC from "./Components/TOC"; import Content from "./Components/Content"; import Subject from "./Components/Subject"; class App extends Component { constructor(props) { super(props); this.state = { subject : {title:'WEB', sub:'world wide web!!'}, content:[ {id:1, title:'HTML', desc:'H.. 2023. 8. 19. 리액트 이벤트 onChange 다루기 리액트 이벤트 onChange 리액트를 공부해야겠다고 결심하고 곧바로 도서관에서 책을 대출해 왔다. 리액트 문법이나 특징을 전혀 모르는 상태는 아니지만, 책 하나 잡고 챕터 하나씩 따라 하며 빠르게 예제를 따라 하다 보면 의외로 여러 가지 저자의 노하우나 기본기를 탄탄히 다질 수 있다. 공부하다가 자주 사용할 만한 예제들을 기록해 놓고 훗날에 잊을 때마다 꺼내보고자 포스팅한다. input 요소를 랜더링 하는 코드와 해당 요소에 onChange 이벤트를 설정하는 코드를 작성하고 onChange 이벤트 부분에 e를 인자로 받아 target.value 콘솔로르 함수로 찍어본다. import React, { Component } from "react"; class EventPractice extends Comp.. 2023. 7. 30. 이전 1 2 3 다음 반응형
