끄적끄적/React (3) 썸네일형 리스트형 React - setState React의 데이터 흐름 리엑트의 데이터 흐름은 단방향 입니다. 즉, 부모에서 자식으로만 전달이 가능합니다! 그래서 props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수 입니다. props driling props가 자식에게 넘겨주는 단계가 두단계 이상될 경우를 props drilling이 일어났다 라고 합니다. props drilling은 과도하지 않으면 괜찮지만, 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는것이 굉장히 난해해집니다. 따라서 최대한 drilling이 안일어나게 해주는것이 코드의 가독성과 유지보수 면에서 유리합니다. 방지하기 위해선 global state를 이용하는것이 좋습니다. state 리렌더 setState는 비동기로 작동 합니다. setState가.. 비동기 통신과 조건부렌더링 비동기 통신과 조건부 렌더링 javascript는 작성된 코드가 상단에서부터 순서대로 실행되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다. 이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용합니다 삼항 연산자 data는 동기적으로 받아와야 하는 데이터입니다. 하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 사용하여 데이터가 있을 때, 없을 때를 모두 적어줘야 합니다. data ? data.fetchBoard : undefined && 연산자 data && data.fetch.. React-Routing 라우터 객체와 라우팅 라우터 객체: 페이지 이동과 관련된 기능을 가지고 있는 객체 정적라우팅과 동적라우팅 정적라우팅 - 예를들어 /singup 페이지는 누가 언제 접속해도 항상 회원가입 페이지가 나옵니다. 이러한 페이지로 이동하는 것을 "정적 라우팅한다"고 합니다. 동적 라우팅 - 반면, 게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경됩니다. 이런 경우에는 게시글이 100개, 1000개가 넘어가게 되면 각각의 글 번호에 따라 페이지를 100개, 1000개씩 만들어 정적 라우팅을 해주기는 어렵기 때문에 이러한 라우팅을 효과적으로 처리하기 위해서 "동적 라우팅"을 사용합니다. next.js에서는 동적 라우팅을 제공해주는데요. 위의 폴더 구조와 같이 보여주고자 하는 폴더 이름의 하위 폴더로 [bo.. 이전 1 다음
