티스토리

몰입하기

검색하기

블로그 홈

몰입하기

devsomehow.tistory.com/m

일신우일신(日新又日新)

구독자: 1

방명록 방문하기

주요 글 목록

[Error] react 비동기 요청시 주의할 점(loading indicator가 필요한 이유) 어떤 에러인가요? 클라이언트 app.js에서 서버의 userinfo엔드포인트로 유저 정보와 유저의 포스트 리스트를 받아와서 프롭스로 마이페이지 사이드바에 내려줬다. 그런데 비동기 요청이 끝나기도 전에 초기 렌더링이 진행되면서 유저 인포를 사용한 리턴값이 깨지는 에러가 났다. 에러 메시지 cannot read ~~ of undefined 에러 핸들링 방법 axios 요청을 마이페이지 사이드바로 옮기고, isloading이라는 상태를 만들어서 useEffect로 서버에 새로 요청 보낼 때마다(새로고침, 초기 렌더링 등)isLoading을 true로 설정하고 요청이 완료됐을 때 then 콜백 함수 안에서 isLoading을 다시 false로 바꿔주었다. 그리고 삼항연산자로 isloading 값에 따라 retu.. 공감수 1 댓글수 0 2021. 11. 18.
React State & Props State(상태) 개념 컴포넌트 내부에서 변할 수 있는 값 useState()의 반환값은 배열 const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값) State를 지정하는 목적은 state 변수에 담긴 데이터를 컴포넌트 간에 공유하기 위함 리액트에서는 state 값을 Controlled Component(state의 영향 하에 있는 컴포넌트)에 자동으로 리렌더링해준다. state는 최소화하는 것이 좋다 지정 여부 부모 -> 자식 컴포넌트로 전달될 수 있으면 x 시간이 지남에 따라 변하지 않으면 x 컴포넌트 내의 state나 props로 계산될 수 있으면 x 위치 영향을 받는 컴포넌트들의 공통 부모 컴포넌트 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다 (top.. 공감수 0 댓글수 0 2021. 6. 9.
React SPA SPA (Single Page Application) 사용자와의 상호작용 과정에서 매번 html 문서 전체를 불러오는 것이 아닌, 필요한 부분만 javascript로 동적으로 렌더링하는 방식으로 만든 웹사이트/웹앱 장점 빠른 반응 속도 서버 과부하 문제 해결 단점 javascript 파일이 무거워져서 첫 화면 로딩 속도가 느림 html 요소가 적어서 SEO(검색 엔진 최적화)에 불리 라우팅 다른 경로(주소)에 따라 다른 화면을 보여주는 것 react에서는 라우팅을 위해 React Router 라이브러리를 사용 React Router : History API를 사용해 라우팅 : 여러 중 경로가 일치하는 하나의 라우터만 렌더링 : path 속성을 지정해 컴포넌트와 연결(link와 경로 일치 시 작동) : t.. 공감수 0 댓글수 0 2021. 6. 7.
React Intro React란? 프론트엔드 개발을 위한 javascript 라이브러리 특징 선언형 (declarative) 선언형이란 코드를 명시적으로 보여주는 프로그래밍 방식 JSX문법을 기반으로 HTML / CSS / JS를 하나의 파일에 작성한다 컴포넌트 하나의 기능을 구현하는 단위 UI의 필수 요소 구조(html)와 동작(javascirpt)에 대한 코드 묶음 독립적이고 재사용이 가능하다 유지 보수에 유리하다 트리 구조를 갖는다(최상위 컴포넌트는 ) 범용성 프레임워크는 생태계에 종속되지만, 라이브러리인 리액트는 일부만으로도 적용이 가능하다 JSX (JavaScript XML) react에서 사용하는 문법 javascript를 확장한 문법 Babel이 JSX를 컴파일해서 javascript로 변환한다 html과 ja.. 공감수 1 댓글수 0 2021. 6. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.