✨ Front-end67 [React] Router -1 세팅 및 style 적용 방법 Link, NavLink Router란? 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. npm install react-router-dom router를 쓰기 위해선 설치해줘야 할 코드가 위에 있다. 이후 npm start를 통해 페이지를 띄우자. BrowserRouter.js HTML 삽입 미리보기할 수 없는 소스 위 js파일을 하나 만들어주고, component > Hello.js, Home.js component 폴더를 만든 후 그 경로 안에다가 Hello와 Home js를 만들어 content 부분을 넣어준다. App.js react-router-dom에서 BrowserRouter, Route, Routes.. 2023. 9. 22. [React] useReducer 사용 예제, useState와의 차이점 useReducer란? 복잡한 상태 관리를 간편하게 처리하기 위해 사용되는 함수이다. useReducer를 사용하면 컴포넌트의 상태를 관리하고 상태를 변경하는 로직을 더 구조적으로 작성할 수 있다. const [state, dispatch] = useReducer(reducer, initialState); state: 현재 상태를 나타내는 값 dispatch: 상태를 변경할 때 사용하는 함수 reducer: 상태를 변경하는 로직이 담긴 함수 initialState: 초기 상태를 설정하는 값 useReducer는 보통 컴포넌트에서 사용할 상태 관리 로직을 별도의 함수인 reducer에서 처리하도록 하는데, 이러한 방식은 상태 관리 로직을 컴포넌트 밖에 둠으로써 코드의 재사용성과 유지보수성을 높인다. use.. 2023. 9. 22. [JavaScript] Json으로 Operation(연산) 기본적으로 단순 문자열을 조합하여 키 값쌍으로 데이터를 뽑아낼 수 있다. ex) 변수에 문자열을 주고, 변수와 문자열을 더해서 키 값쌍을 구할수도 있다. {[one]: value} : 객체 비구조화 할당을 사용하여 one 변수의 값에 해당하는 속성을 추출하고 그 값을 value 변수에 할당한다. one 변수의 값은 "sports"이므로, 실제로는 {[sports]: value}가 되며, 객체의 속성명 "sports"에 해당하는 값을 value에 할당한다. default 매칭되는 데이터의 변수가 일치하지 않는데, 이때 default 값을 지정해줌으로써 console에서 찍을 수 있다. default 값은 연산을 넣어서 사용할 수도 있다. arrow 함수로도 나타낼 수 있다. for Object for..... 2023. 9. 22. [JavaScript] Distructuring의 개념과 사용 방법 Distructuring이란? ~의 구조를 파괴하다. 라는 의미이며, 기존 변수 할당 방식을 마치 배열처럼 선언해 분할할당하도록 하는 기능이다. Array 분할 할당 ex1) ex2) Object 분할할당 2023. 9. 21. 이전 1 2 3 4 5 6 ··· 17 다음
