React9 React-페이지라우팅 페이지라우팅 : URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정 index페이지 : URL(google.com) 경로 뒤에 아무것도 표시하지 않았을 경우 나오는 시작페이지 Path : naver.com/ 뒤에 붙는 blog나 cafe (ex. naver.com/ blog, naver.com/cafe) 클라이언트 사이드 렌더링 리액트 앱은 html 파일이 하나뿐인 단일 페이지 애플리케이션(Single Page Application) html파일이 하나이기 때문에 서버 사이드가 아닌 클라이언트 사이드 렌더링으로 페이지를 라우팅한다! 렌더링 과정 웹 브라우저가 URL로 서비스 요청 웹 서버는 요청 URL의 경로를 따지지 않고 페이지의 틀 역할을 하는 index.html과 자바스크립트 애플리케이션인 리액.. 2023. 10. 9. 리액트 useNavigate hook 사용 useNavigate훅은 경로이동 때 사용 useNavigate 훅을 이용해서 navigate 함수 생성 클릭 이벤트 핸들러에 등록할 함수 생성 후 안에 navigate 함수 인수에 해당 경로를 전달 정리 쓰면서 아직 의문점은 없는데 미리 Path와 router 등을 설정해둬야 편하겠다ㅏ 2023. 10. 6. React props로 함수 전달에서 의문점 해소 아래는 EmotionItem 콤포넌트에 props들을 전달하는데 onClick props에 handleChangeEmotion이라는 함수를 만들어서 전달한다. 그 함수는 emotionId라는 매개변수를 받아서 state변수에 업데이트 하는데... Editor.js 여기서 의문점이 생기는데 감정 이미지 선택 섹션에서 클릭한 이미지 번호를 매개변수 emotionId에 저장하는건가? **(EmotionItem은 아래와 같이 emotionList의 배열에서 map함수를 이용해서 이미지 5개를 각각렌더링함) 어떻게 클릭한 이미지 번호를 매개변수로 받을 수 있는거지? EmotionItem컴포넌트는 아직 emotoinId태그도 가지고있지 않다.(emotionList 배열의 낱낱의 요소인 객체 id에 emotionId.. 2023. 10. 3. React 학습중 객체에 인자 전달 시에 생긴 의문점 해결과정 App.js Todo는 useReucer의 배열의 첫번째 인자로 초기 State값 , mockTodo는 배열인데 객체 2개를 담고 있음(content1, content2) Todolist.js getsearchResult 함수의 반환값을 그냥 Todo로 고려해도 무방! 객체 it를 {…it}를 활용해서 객체요소 전달 (ex . { Id: 1, content : 조깅 , isDone:flase} —>props객체 안에 담김) Todoitem.js Todolist에게 받은 id를 onUpdate에 인수로 넣어서 실행하는 onChangeCheckbox함수 App.js dispatch({Type:”UPDATE”, targetID}) content1은 TodoItem key=“1” content2은 TodoIte.. 2023. 9. 29. React 최적화(1)-React.memo '최적화'란 웹 서비스의 성능을 개선하는 기술 React.memo의 용법 const momoizedComp = React.memo(Comp) Comp = 메모이제이션하려는 컴포넌트 목적 : 컴포넌트가 모든 상황에서 리렌더되지 않도록 하기 위함 React.memo는 인수로 전달한 컴포넌트를 메모이제이션된 컴포넌트로 만들어 반환 Props가 메모이제이션의 기준 React.memo가 반환하는 컴포넌트는 부모 컴포넌트에서 전달된 Props가 변경되지 않는 한 리렌더되지 않음 Props로 전달되는 값이 많을 때는 판별 함수를 인수로 전달해 Props의 특정 값만으로 리렌더 여부를 판단 const Comp = ({a, b, c}) => { console.log("출력!"); return Comp }; functio.. 2023. 9. 29. useReducer 사용 사용하는 이유? 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있다. 상태 변화 코드 = State값을 변경하는 코드 useReducer기본 사용법 1. import{useReducer} from "react"; 2. const [count, dispatch] = useReducer(reducer, 0); const [ count, dispatch] = count->state 변수 dispatch->상태 변화 촉발 함수 useReducer (reducer,0) = 생성자(상태 변화 함수, 초깃값) dispatch = 인수로 객체 전달, 이 객체는 State의 변경 정보를 담음 , 다른 말로 action 객체라고도 함 dispatch({type:"DECREASE", data:1}) type 프로퍼티 : 어.. 2023. 9. 27. 이전 1 2 다음
