미새문지

if문 만큼 많이 사용되는 것들이 - map - find - filter 가 있습니다 백엔드를 받아오는 데이터의 형식은 대부분이 배열인 경우가 많습니다. 따라서 이러한 배열들을 화면에 보여주기 위해 사용하는 함수들입니다. (그래서 배열일 경우에만 사용이 가능하다) 1. map [반복문, 한줄 씩 읽어오는 것] => 주로 배열의 길이만큼 반복할 때 사용 ex) 배열명.map((결과값 변수명) => ( 실행문 )) ex) 실행문의 경우 state.map((item) => console.log(item.id)) (id만 넣었으므로 name은 안오고 id값 1,2,3 만 들어온다) ex) HTML 반복의 경우 state.map((item) = ( )) (백엔드의 데이터를 가져올때 데이터가 배열로 오기 때문에 데..

조건부 랜더링 방식에 사용되며 조건에 충족할 경우 해당 부분을 리랜더합니다 - 식 - { 조건식 ? true인 경우 : false인 경우 } {조건식 && true 인 경우} = {조건식 ? true인경우 : null} {}, [] => 값이 있는걸로 쳐져요 따라서 배열일 때는 {조건식.length > 0 && true인 경우} 상위 컴포넌트(부모컴포넌트)의 값을 하위 컴포넌트에 전달할 변수를 칭하는 말입니다 구조분해할당이라고도 하며 배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있도록 사용하는 JavaScript 표현식이며, 객체의 키값을 찾아오는 것입니다 vscode에서는 저번 강의와 마찬가지로 파일 정리와 기본 설정을 합니다 ..

react 의 핵심은 re-render(리랜더) 와 Components(컴포넌트)입니다 한가지 이상의 기능을 수행하는 UI 단위 기존에 있던 html을 쪼갠 느낌입니다. html을 통으로 다 작성하면 보기도 힘들고 작성할 때 불편함이 있어 여러 컴포넌트로 나누어 작성하는 것입니다 업데이트 이전의 가상 돔트리와 업데이트 이후 가상 돔트리 상태를 비교하여 업데이트 된 내용이 있다면 컴포넌트를 사용자의 화면에 구성할 때 사용합니다 사용자 화면을 구성할 때 사용하는 render 함수를 다시 호출하는 것이 Re-render(리랜더)입니다 컴포넌트는 말그대로 부분부분 따로 작업해 붙이는 느낌인데 이렇게 div 구조가 있다 하면 헤더는 헤더 컴포..

이전 글에서 리액트 라이브러리의 기본 설정들을 간단하게 해봤습니다 이번 글에선 설정을 완료하여 웹브라우저를 잘 실행시켜보겠습니다 먼저 React의 기본 주소와 포트는 localhost:3000 입니다 localhost는 본인의 IP주소이며, 3000은 127.0.0.1:3000 입니다 주소는 변경도 가능하여 밑에서 설명하겠습니다 npm i란? node_modules가 없는 상태로 전달되며 git에 있는 클론을 받아도 같은 형태입니다 이런 형태의 파일은 package.json이라는 파일이 있으며 리액트의 모든 기능을 총괄하는 역할을 하는 파일입니다 package.json의 코드입니다 위에서부터 이 폴더의 이름과 버전, 등등이 작성되있고 dependencies라는 코드는 의존성을 부여한 것으로 node.js..

자바스크립트 강의가 끝나고 리액트 강의가 시작했습니다 리액트가 프론트엔드의 메인이라고 할만큼 중요하고 복잡하다고 하여 열심히 따라잡을 예정입니다 리액트란? - 사용자 인터페이스를 만들기 위한 자바 스크립트의 라이브러리 중 하나이며, 모듈형 개발로 빠르게 지원이 가능하고 라이브러리 특성상 붙여 사용하기 때문에 간편하여 프론트엔드의 표준으로 자리 잡았습니다 이러한 리액트를 사용하기 위해 vscode에서 기본적인 설정을 해야합니다 먼저 터미널을 실행할 폴더안에 리액트 파일을 만들어야합니다 npx create-react-app "파일 이름" 으로 폴더를 생성해줍니다 여기서 npx는 npm, yarn과 같은 프로젝트 패키지 관리툴입니다 create-react-app은 CRA라고 부르며 react에서 따로 설치하지..