본문 바로가기

전체 글

 (147)
useReducer what is useReducer? reducer는 state 관리를 돕는 훅으로, useState와 비슷하다. 대신 useState보다 더 많은 기능을 가지고 있기 때문에, 복잡한 state를 관리할 때에는 state 대신 reducer를 사용한다. 복잡한 state란 어떤 state일까? 어떤 state의 업데이트가 다른 state에 의존하고 있다(그래서 최신 state를 보장받을 수 없을 때). 서로 연관있는 state가 여러 개 존재하고 있다(action 객체 데이터나, state를 객체로 관리해서 하나의 state로 관리 가능). How to use Reducer? const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn) s..
useEffect what is Effect? 리액트의 main job이 아닌 모든 것을 effct 또는 side effect 라고 부른다. main | 리액트는 UI를 설계하는 자바스크립트 라이브러리이다. props을 이용해서 UI를 rendering 한다 => 재사용 가능한 component 사용자의 input에 따라 state를 관리하고, UI를 re-rendering 한다 => reacting to user side | 리액트의 main job이 아닌 모든 것 http request 타이머 설정하기 브라우저 storage에 데이터 저장하기 response에 따라서 어떤 데이터를 저장하고 처리하기(사용자의 input을 저장하고, 유효성을 체크하는 것도 side effect에 해당한다). what is useEffec..
What is LocalStorage? 웹 앱을 reload 하면, 스크립트 파일이 처음부터 재시작 된다. 즉 작성한 어플리케이션 코드가 다시 parsing 되기 때문에, 변수에 저장해 둔 값도 초기화된다. 따라서 스크립트 안에서 로그인 상태를 기록한다면 페이지를 새로고침했을 때 그 데이터가 휘발된다. 브라우저에서 페이지를 reload 했을 때 로그인 정보가 유지되는 것은, 그 정보를 스크립트 파일이 아니라 브라우저의 Local Storage에(또는 쿠키 세션에) 저장하기 때문이다.
useRef What is ref? ref는 reference(참조)를 뜻한다. useRef는 리액트가 제공하는 tool 중 하나로 많은 일을 처리할 수 있는 도구이지만, 이것의 가장 기본적인 역할은 어떤 DOM 요소를 참조하고, 이를 이용해서 어떤 일을 수행하는 것이다. How to use ref? ref는 모든 내장 html 요소에서 사용될 수 있지만, input 요소를 참조하는 것이 가장 흔한 경우 중 하나이다. 예를 들어 사용자가 어떤 값을 입력하고 그 값을 리스트 형식으로 렌더링 한다고 해 보자. 이 때 input의 값이 변할 때 마다 실행되는 onChange에서 state를 업데이트한다면 어떨까? 최종적으로 필요한 것은 사용자가 제출 버튼을 클릭했을 때의 input 값이므로, 사용자가 키를 누를 때마다 s..
Fragment & Portal React tools for semantic HTML React.Fragment JSX 코드는 다음과 같은 한계를 가지고 있다. Root 요소는 1개보다 많을 수 없다. jsx 컴포넌트는 리액트의 createElement 함수를 실행하는데, 이 함수는 배열을 반환한다. root element가 여러 개라면 여러 개의 배열을 반환해야 한다. => JS에서 유효하지 않은 구문이다. children element는 nested array가 되기 때문에 유효하다. React.createElement( 'div', { className... }, createElement('p', , ), ...) div soup | 1의 이유로 태그를 남발하게 될 수 있다. => no semantic, low performanc..
Component Styling Dynamic Styling | Validation form을 제출하는 이벤트가 발생했을 때, 사용자가 input에 입력한 값의 유효성에 따라 스타일링에 변화를 줄 수 있다. 유효한 값을 제출하면 input의 border를 초록색으로, 그렇지 않으면 빨간색으로 보여주는 것이 가장 대표적이다. inline style const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(''); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = (event) => { setEnteredValue(event.target.value); }; cons..
Conditional contents && operator const Expenses = (props) => { const [filterYear, setFilterYear] = useState('2022'); const filterd = props.expenses // .filter((item) => item.date.getFullYear().toString() === filterYear); return ( {filterd.length === 0 && no item} {filterd.length !== 0 && filterd.map((item) => ( ))} ); }; if const Expenses = (props) => { const [filterYear, setFilterYear] = useState('2022'); const fil..
Dynamic List 서로 같은 UI를 가지고 다른 data를 보여주는 컴포넌트는 원하는 만큼 재사용할 수 있다. 인스타그램의 피드 아이템이나 쇼핑 어플리케이션의 상품 목록과 같은 것이 이런 컴포넌트에 해당한다. 이 때 이러한 컴포넌트가 정확하게 몇 개 사용될지를 미리 정해서 hard coding 하는 것이 아니라, 동적으로 리스트를 업데이트한다. forEach vs. map | 왜 map을 사용해야 하는가? jsx 구문에서 컴포넌트를 요소로 갖는 배열을 전달했을 때, 리액트는 이것을 간단히 렌더링할 수 있다. 이 때 forEach 구문은 배열의 모든 아이템에 콜백 함수를 실행할 뿐이고, map 구문은 모든 아이템에 콜백 함수를 실행한 뒤에 그 아이템들로 이루어진 새로운 배열을 반환한다. map // this is worki..

티스토리툴바