[React] React Hooks (5) - useRef
2023. 1. 31. 20:09
프로그래밍/React
useRef reference는 기본적으로 component의 어떤 부분을 선택할 수 있는 방법 document.getElementByID()와 같은 역할 useRef 예시1 const App = () => { const input = useRef(); setTimeout(() => input.current.focus(), 5000); return ( Hello ); }; 5초 뒤 input이 선택되어 focus 됨 useRef 예시2 const useClick = (onClick) => { const element = useRef(); useEffect(() => { if(element.current){ element.current.addEventListener("click", onClick); } r..
[React] React Hooks (4.1) - useEffect 활용법
2023. 1. 30. 20:58
프로그래밍/React
useEffect를 활용하여 title을 변경해보자 웹 페이지 title을 업데이트 하는 hooks 만들어보기 const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Welcome"); setTimeout(() => titleU..
[React] useEffect
2023. 1. 27. 20:38
프로그래밍/React
useEffect useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 수행 useEffect 예시1 const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [anotherNumber, setAnotherNumber] = useState(0); return ( Hello set..
[React] React Hooks (3) - useTabs
2023. 1. 26. 20:55
프로그래밍/React
useTabs 버튼에 따라 노출되는 내용을 변화시킬 수 있는 custom hook useTabs 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const content = [ { tab: "Secton 1", content: "I'm the content of the Section 1" }, { tab: "Secton 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if(!allTabs || Array.isArray(allTabs)) { return; } const [currentIn..
[React] React Hooks (2) - useInput
2023. 1. 25. 20:21
프로그래밍/React
useInput useInput은 기본적으로 input을 업데이트함 useInput 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const useInput = initialValue => { const [value, setValue] = useState(initialValue); const onChange = event => { const { target: { value } } = event; setValue(value); }; return { value, onChange }; }; const App = () => { const name = useInput("Mr."); return ( Hello ); }..
[React] React Hooks (1) - useState
2023. 1. 20. 20:10
프로그래밍/React
Hooks를 사용하여 증가, 감소 버튼 만들기 hooks를 사용한 예시(함수형 컴포넌트) import React, { useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hooks test {item} Press the button Increment Decrement ); }; const rootElement = document.getElementById("root");..
[React] Hooks란?
2023. 1. 19. 20:57
프로그래밍/React
Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 hook은 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있도록 함 결론적으로 functional component에서 state를 가질 수 있게 해줌 class component state 예시 class App extends Component { state = { count: 0 }; modify = n => { this.setState({ count: n }); }; render() { const { count } = this.state; return ( {count} ..
React Native와 Flutter 비교
2023. 1. 18. 20:04
프로그래밍/React Native
React Native와 Flutter 비교 대표적인 크로스 플랫폼 개발 프레임 워크인 React Native와 Flutter를 비교해보자 React Native vs Flutter 언어 React Native는 React를 사용. React는 JavaScript기반의 React문법을 사용함 Flutter는 JS를 대신하기 위하여 구글에서 개발한 Dart라는 언어를 사용 React Native Flutter JavaScript 기반 React 문법 Dart 개발 Tool React Native와 Flutter 모두 Android Studio를 사용하여 개발이 가능 React Native는 XCode로도 사용이 가능하지만, Flutter는 구글에서 만들었기 때문에 그런지 XCode는 지원하지 않음 그외 다..