React21 [React] SPA 란? 불안하게 오늘 작성한 코드들이 날 괴롭히지 않는다... 1. SPA란? SPA는 Single Page Application의 약자이다. 예전에 웹 페이지에서는 페이지를 보여줄 때 여러 페이지로 구성이 되어있었다. A html, B html, C html.... 그리고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아와서 렌더링 했다. 즉, 웹 애플리케이션 뷰를 서버에서 담당했었다. 하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 데이터 정보 전송 과부하로 인한 속도 저하 등 문제점이 생기게 되었다. 그래서 요즘 나오는 라이브러리 또는 프레임워크는 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다. 예전에는 페이지를 요청할 때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 되었지.. 2023. 1. 16. [React] <a> 태그 사용시 오류 해결 Router test 롤백 6번 ^^... 오류 발생 The href attribute requires a valid value to be accessible~~~라는 오류가 나왔다 Router를 공부하던 도중 그래도 꽤 많은 오류를 만났다고 생각했는데 아직도 빨간 글씨는 마주치면 어색하다. 피하진 말아야지. 본론으로 들어가서 이 오류가 무엇을 뜻하는가? 영어의 중요성 프런트 개발을 하다 보면 많이 작성하게 된다. a태그의 attribute인 href=""또한 같이 만나게 된다. React를 사용하지 않았을 때 작성했던 코드처럼 똑같이 작성했다. 하지만 여기서 오류를 맞이하게 되었다. The href attribute requires a valid value to be accessible. Provide.. 2023. 1. 16. [React] LifeCycle API 해외 직구로 시킨 모자가 3주 만에 왔다. 1. LifeCycle API 2. 컴포넌트 초기 생성 2-1. constructor constructor는 먼저 props를 파라미터로 받아오고 안에 super(props)를 해줘야 하는데 용도는 원래 갖고 있던 생성장 함수를 불러와주고 하고 싶은 작업을 할 때 사용된다. constructor(props) { super(props); console.log('constructor'); } 2-2. componentDidMount 이 API는 주로 외부 라이브러리를 연동하거나 컴포넌트에서 필요로 하는 데이터 요청을 하거나(ex: ajax, graphQL) DOM에 관련된 작업(ex: 스크롤 설정, 크기 읽어오기)을 할때 사용한다. conponenetDidMount.. 2023. 1. 16. [React] state 몬스터 흰색은 왜 맛있을까 예제와 함께 이해를 해볼 예정🔥🔥🔥 먼저 앞서 요약해서 말하면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정은 불가능하다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. 1. state 란? State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 .. 2023. 1. 16. 이전 1 2 3 4 5 6 다음 반응형
