React12 리액트의 렌더링 방식 대표적인 렌더링의 종류 클라이언트사이드 렌더링(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. 이전 1 2 3 다음
