본문 바로가기

분류 전체보기57

리액트에서 사이드 이펙트란? 사이드 이펙트(Side Effect)란? 사이드 이펙트는 한국어로는 '부작용'이라는 뜻입니다. 일상생활에서는 '약의 부작용'처럼 사용하는 단어인데요. 예를 들면 감기약을 먹었을 때 감기 증상은 없어졌지만 (작용) 피부가 붉게 올라오면 (부작용) 이 약에는 부작용이 있다고 할 수 있죠. 일상생활에서는 주로 안 좋은 것들을 부작용이라고 부르지만 프로그래밍에선 말 그대로 외부에 부수적인 작용을 하는 걸 말하는데요. 어떤 것인지 간단한 자바스크립트 함수를 예시로 알아봅시다. let count = 0; function add(a, b) { const result = a + b; count += 1; // 함수 외부의 값을 변경 return result; } const val1 = add(1, 2); const v.. 2023. 11. 26.
리액트의 ref와 useRef Ref 객체 생성 import { useRef } from 'react'; // ... const ref = useRef(); useRef 함수로 Ref 객체를 만들 수 있었습니다. ref Prop 사용하기 const ref = useRef(); // ... ... ref Prop에다가 앞에서 만든 Ref 객체를 내려주면 됩니다. Ref 객체에서 DOM 노드 참조하기 const node = ref.current; if (node) { // node 를 사용하는 코드 } Ref 객체의 current 라는 프로퍼티를 사용하면 DOM 노드를 참조할 수 있었습니다. current 값은 없을 수도 있으니까 반드시 값이 존재하는지 검사하고 사용해야 하는 점도 잊지 마세요! 예시: 이미지 크기 구하기 다음 코드는 i.. 2023. 11. 26.
useState 사용법 정리 제가 지금까지 공부한 useState 사용법을 정리해보도록 하겠습니다. 초깃값 지정하기 const [state, setState] = useState(initialState); useState 함수에 값을 전달하면 초깃값으로 지정할 수 있었습니다. 콜백으로 초깃값 지정하기 const [state, setState] = useState(() => { // 초기값을 계산 return initialState; }); 이 방법은 여기서 처음 소개하는 내용인데요, 초깃값을 계산해서 넣는 경우 이렇게 콜백을 사용하면 좋습니다. 무슨 말인지 예시 코드로 한번 살펴볼게요. function ReviewForm() { const savedValues = getSavedValues(); // ReviewForm을 렌더링할 .. 2023. 11. 25.
리액트 조건부 렌더링 꿀팁 리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁 논리 연산자 활용하기 AND 연산자 import { useState } from 'react'; function App() { const [show, setShow] = useState(false); const handleClick = () => setShow(!show); return ( 토글 {show && 보인다 👀} ); } export default App; show 값이 true 이면 렌더링 하고, false 이면 렌더링 하지 않습니다. OR 연산자 import { useState } from 'react'; function App() { const [hide, setHide] = useState(true); const handleClick.. 2023. 11. 25.

티스토리툴바