[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는 지원하지 않음 그외 다..
[JavaScript] 자바스크립트 !! 연산자
2023. 1. 16. 20:02
프로그래밍/JavaScript
!! 연산자 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환하기 위해 사용 조건문 예시 if("test")// true if(!"test")// false if(!!"test")// true if("")// false if(!"")// true if(!!"")// false if(null)// false if(!null)// true if(!!null)// false if(true)// true if(!true)// false if(!!true)// true 자바스크립트는 조건문에서 비교 시 자동으로 boolean 타입으로 변환을 해주기에 예시에서 보듯 !! 연산자가 조건문에서는 큰 의미가 없음