본문 바로가기

전체 글57

리액트의 렌더링 방식 대표적인 렌더링의 종류 클라이언트사이드 렌더링(Client-side Rendering) — 웹 브라우저에서 자바스크립트로 HTML을 만드는 것 리액트로 할 수 있는 가장 기본적인 방식의 렌더링입니다. 리액트로 작성한 코드는 자바스크립트로 변환이 가능한데요. 참고로 이런 변환을 트랜스파일링이라고 부릅니다. 클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 걸 말합니다. 서버사이드 렌더링(Server-side Rendering) — 서버에서 HTML을 만들고 리스폰스로 보내주는 것 백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 '서버사이드 렌더링'이라고 합니다. 서버에서 HTML을 만든다는 뜻이죠. 리액트에서.. 2023. 11. 29.
리액트 라우터란? 리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리입니다. 리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징입니다. 라우터 리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요한데요. 우리는 그 중에서도 BrowserRouter 라는 걸 사용했습니다. 이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있습니다. import { BrowserRouter } from 'react-router-dom'; function App() { return ... ; } 페이지 나누는 방법 Routes 컴포넌트 안에다가 Route 컴포넌트를 배치해서 각 페이지를 나눠줄 수 있습니다. 이때 Routes 안에서는 위에서부터 차례대로 Route를 검사하는데요. 현재 경로와 pa.. 2023. 11. 29.
리액트 Context 정리 Context는 한국어로 맥락이라는 뜻입니다. 쉽게 말해서 어떤 상황에 대한 정보를 의미하는데요. Props만으로 리액트 개발을 하다 보면 여러 곳에 쓰이는 데이터를 내려주고 싶을 때가 있는데요. 이때 컴포넌트의 단계가 많다면 여러 번 반복해서 Prop을 내려줘야 합니다. 이런 문제점을 프롭 드릴링(Prop Drilling)이라고 합니다. Context는 프롭 드릴링을 해결하기 위해 사용하는 기능입니다. Context 만들기 Context는 createContext 라는 함수를 통해 만들 수 있습니다. import { createContext } from 'react'; const LocaleContext = createContext(); 참고로 이때 아래처럼 기본값을 넣어줄 수도 있어요. import .. 2023. 11. 27.
리액트 훅(Hook) 정리 Hook의 규칙 반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀) useState State 사용하기 const [state, setState] = useState(initialState); 콜백으로 초깃값 지정하기 초깃값을 계산하는 코드가 복잡한 경우에 활용 const [state, setState] = useState(() => { // ... return initialState; }); State 변경 setState(nextState); 이전 State를 참조해서 State 변경 비동기 함수에서 최신 State 값을 가져와서 새로운 State 값을 만들 때 setState((prevState).. 2023. 11. 27.
리액트에서 사이드 이펙트란? 사이드 이펙트(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.
VSCode에서 자주 사용하는 기능 소개 자동완성 예를들어 handleIconClick 이라는 단어를 입력할 때 단어의 앞 부분인 hand 만 입력하거나 단어의 이니셜인 hic 만 입력하면 VSCode는 툴팁으로 단어를 추천해주는데요. 여기서 원하는 단어를 선택한 다음 Enter나 Tab 키를 눌러 단어를 완성할 수 있습니다. 단축키 멀티 커서 선택하기 텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고, 텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅되는데요. 이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있습니다. 윈도우즈 맥 Ctrl + Shift + L Cmd + Shift + L 직접 멀티 커서 만들기 원하는 위치에 텍스트 커서를 만들 수 있습니다. 윈도우즈 맥 Alt + 클릭 Opt.. 2023. 11. 24.

티스토리툴바