분류 전체보기
[TIL] 엘리스 SW 엔지니어 트랙 Day 052
[TIL] 엘리스 SW 엔지니어 트랙 Day 052
2022.01.10📖 오늘 배운 내용 - 2022.01.04 dangerouslySetInnerHTML 카카오 api 사용 📝 이론 시간 코드 import './App.css'; import {useState} from 'react'; function Header(props){ console.log('Header'); function onClickHandler(evt){ evt.preventDefault(); props.onChangeMode('WELCOME'); } return {props.title} } function Nav(props){ let lis = [] function clickHandler(evt){ evt.preventDefault(); props.onChangeMode('READ', Number(evt..
[TIL] 엘리스 SW 엔지니어 트랙 Day 051
[TIL] 엘리스 SW 엔지니어 트랙 Day 051
2022.01.03📖 오늘 배운 내용 - 2022.01.01 Hooks Effect Hook useMemo useCallback useRef useReducer 📝 Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. const App = () => { const [username, setUsername] = useState('') return ( {username}님 환영합니다. ) } Hook은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 use로 시작해야 된다. 최상위 Level에서만 Hook을 호출할 수 있다. (if문, for문 안 쪽 또는 콜백 함수 내에서 호출 X) 즉, 첫 번째 중괄호 안에서만 사용..
[React] 리액트 useReducer사용법
[React] 리액트 useReducer사용법
2022.01.03🎯 useReducer사용법 const [, ] = useReducer(, , ) import ReactDOM from 'react-dom'; import './index.css'; import * as serviceWorker from './serviceWorker'; import React, { useReducer } from 'react' // count의 초기 state를 0으로 설정하세요. const initialState = { count: 0, }; function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {cou..
[React] 리액트 useRef사용법
[React] 리액트 useRef사용법
2022.01.03🎯 useRef사용법 const refContainer = useRef(initialValue); const App = () => { const inputRef = useRef(null) const onButtonClick = () => { inputRef.current.focus() } return ( input으로 포커스 ) } 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다. ref 객체는.current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다. 일반적으로 React에서 DOM Element에 접근할 때 사용합니다(DOM Element의 ref 속성을 이용한다.) useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재 렌더링 되지 않는다.
[React] 리액트 useCallback 사용법
[React] 리액트 useCallback 사용법
2022.01.03🎯 useCallback 사용법 const memoizedValue = useCallback(() => { doSomething(a, b); }, [a, b]); const App = () => { const [firstName, setFirstName] = useState('철수') const [lastName, setLastName] = useState('김') // 이름과 성이 바뀔 때마다 풀네임을 return하는 함수를 메모이제이션 const getfullName = useCallback(() => { return `${firstName} ${lastName}` }, [firstName, lastName]) return {getfullName()} } 함수를 메모이제이션 하기 위해 사용하는 Hoo..
[React] 리액트 useMemo 사용법
[React] 리액트 useMemo 사용법
2022.01.03🎯 useMemo 사용법 const memoizedValue = useMemo(() => computerExpensiveValue(a, b), [a, b]) const App = () => { const [firstName, setFirstName] = useState('철수') const [lastName, setLastName] = useState('김') // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션 const fullName = useMemo(() => { return `${firstName} ${lastName}` }, [firstName, lastName]) } 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션 하여 재 렌더링 시 불필요한 연산을 줄인..
[React] 리액트 State Hook과 Effect Hook
[React] 리액트 State Hook과 Effect Hook
2022.01.03🎯 State Hook과 Effect Hook 📝 State Hook const App = () => { // 일반적인 useState 사용법 const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다. 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다. state는 읽기 전용이므로 직접 수정 금지!!!! state를 변경하기 위해서는 setState를 이용 state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다. const App = () => { const [title, setTitle] = useState("") // State를 변경할 값을 직접 입력 set..
[TIL] 엘리스 SW 엔지니어 트랙 Day 050
[TIL] 엘리스 SW 엔지니어 트랙 Day 050
2022.01.03📖 오늘 배운 내용 - 2021.12.31 Props State 📝 Props [React] 리액트 Props란? 🎯 리액트 Props란? 📝 props란? // 컴포넌트 생성 const Welcome = (props) => { retutn Hello, {props.name} ; } // 컴포넌트 사용 const App = () => { return ; } 기본적으로 Component에 원하는 값을 넘겨줄.. lakelouise.tistory.com 📝 State [React] 리액트 State란? 🎯 리액트 State란? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return (..
[React] 리액트 클래스 컴포넌트에 이벤트 정의하기
[React] 리액트 클래스 컴포넌트에 이벤트 정의하기
2022.01.03🎯 클래스 컴포넌트에 이벤트 정의 방법 함수를 이벤트 바인딩을 하지 않으면 해당 함수가 어떤 함수인지 알 수 없기 때문에 바인딩을 꼭 해줘야 한다. constructor()와 render()사이에 이벤트를 정의한다. 이벤트 명 = () =>{ //이벤트 기능 } constructor()에서 정의한 이벤트를 바인딩해준다. this.이벤트명 = this.이벤트명.bind(this); render()내에서 이벤트를 호출. 📝 메소드에서 이벤트 바인딩 // 화살표 함수를 사용한 이벤트 핸들러 onClick={(e)=>this.이벤트명(매개변수, e)} // bind()함수를 사용한 이벤트 핸들러 onClick={this.이벤트명.bind(this, 매개변수)} 화살표 함수를 사용하면 명시적으로 인자 e를 제공해..
[React] 리액트 클래스형 컴포넌트 setState 사용하기
[React] 리액트 클래스형 컴포넌트 setState 사용하기
2022.01.03🎯 클래스형 컴포넌트 setState 사용하기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; class InputUserData extends React.Component { constructor(props) { super(props); this.state = { name: "홍길동", job: "developer" }; } //name 데이터를 변경하는 메소드 onNameHandler = event => { //setState를 사용해 name 데이터 업데이트 기능을 구..
[React] 리액트 생명주기란?
[React] 리액트 생명주기란?
2022.01.03🎯 리액트 생명주기란? 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다. 컴포넌트가 실제 DOM에 삽입되는 것을 마운트 컴포넌트가 변하는 것을 업데이트 컴포넌트가 DOM 상에서 제거되는 것을 언마운트 📝 생명주기 메소드 컴포넌트는 생성->업데이트->제거의 생명주기를 지닌다. constructor(): State 데이터를 초기화하는 메소드 render(): 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드 componentDidMount(): 컴포넌트가 마운트 된 직후 호출되는 메소드 componentDidUpdate(): 업데이트가 진행된 직후에 호..
[React] 리액트에서 이벤트를 다루는 방법
[React] 리액트에서 이벤트를 다루는 방법
2022.01.03🎯 리액트에서 이벤트 다루는 방법 리액트에서 이벤트의 이름은 카멜(Camel) 표기법으로 사용한다. 문자열이 아닌 JSX 함수명으로 전달한다. (onClick={함수명}) 📝 이벤트 처리(핸들링) 방법 이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 아래 onClick처럼 함수의 형태로 객체를 전달한다. 📕 핸들링 함수 선언 const App = () => { const handleClick = () => { alert("클릭했습니다."); } return ( 클릭하세요 ); }; 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법 📕 익명 함수로 처리 const App = () => { return ( { alert('클릭했습니다.') }}>클릭하세요 ) } 이벤트를 할당하는 부분에서 익명..