react4 Axios Axios 는 promise Api 를 활용하는 Http 비동기 통신 라이브러리 이다. Ajax, fetch 와 같은 웹 통신 기능을 제공하는 라이브러리 이다. Http 요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경해 준다. 브라우저 호환성이 뛰어나다. Yarn 으로 설치할때 $yarn add axios 기본형태 GET, POST , Other Http Method - GET(데이터를 가져올때) axios.get('/test?name=veneas') .then(function (response) { // 성공한 경우 실행 console.log(response); }) .catch(function (error) { // 에러인 경우 실행 console.log(error); }) .then(fu.. 2023. 7. 17. React Lifecycle 리액트의 주요한 생명주기 메서드는 componentDidMount(): 컴포넌트가 생성된 직후에 호출된다. 이 단계에서는 주로 초기화 작업이 수행됩니다. 예를 들어, 외부 데이터를 가져오거나 이벤트 리스너를 등록하는 등의 작업이 이루어진다. componentDidUpdate(prevProps, prevState): 컴포넌트가 업데이트되기 직전에 호출됩니다. 이 단계에서는 이전 프로퍼티와 상태와 현재 프로퍼티와 상태를 비교하여 필요한 작업을 수행할 수 있다. 예를 들어, 이전 상태와 현재 상태를 비교하여 특정 조건에 따라 추가적인 업데이트를 수행할 수 있다. componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출된다. 이 단계에서는 주로 리소스 해제 또는 이벤트 리스너 제거와 같은 정리.. 2023. 7. 10. 정적 라우팅( Static Routing) - 정적 라우팅 (Static Routing) 라우터의 경로를 미리 정의하여 페이지 전환을 처리하는 방식을 의미한다. -장점 성능: 정적 라우팅은 페이지 전환시 서버에 추가 요청을 보내지 않고 클라이언트 측에서 처리합니다. 이로인해 서버 부하가 감소하고 전체적인 성능이 향상될 수 있다. 캐싱: 정적 라우팅은 클라이언트 측에서 페이지 전환에 필요한 자원을 모두 내려받습니다. 이렇게 내려받은 자원은 클라이어언트 츧에서 캐싱되므로, 같은 페이지로의 다시 접근 시 서버에 재요청하지 않고 캐시된 자원을 사용할 수 있습니다. 이는 네트워크 대역폭을 절약하고 더 빠른 페이지 로딩 속도를 제공할 수 있습니다. 검색 엔진 최적화(SEO) : 정적 라우팅은 초기 렌더링 시에 모든 페이지 컨텐츠를 내려받아 브라우저에서 렌더.. 2023. 7. 4. state, props, 리액트 리렌더링 - State state는 변수를 선언할수 있다. 그러나 state가 let이나 const와 다른점은 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 다시말해 값이 변하게 되면 연관있는 컴포넌트들이 재렌더링이 되어 화면이 바뀌게 된다. 이때 state와 함께 사용 되어 값을 바꿔줄 수 있는 것이 함수가 setState이다. function user() { const [ gender, setGender ] = useState("male") const genderHandler = () => { setPhone(phone === "male" ? "남자" : "여자"); } return ( 나는 {gender}이야. Change ); } gender 이라는 변수명에 male 이라는 초기값을 넣었고, c.. 2023. 7. 3. 이전 1 다음
