sujin's 개발 로그

state가 변화할 때 모든 component가 다시 실행되고, code들도 다시 실행됩니다. 그러나 component 내의 몇몇 코드들은 처음 한 번만 실행되고 다시 실행되지 않도록 할 필요가 있습니다. 이럴 때 Effect를 사용해주면 됩니다. 아래 코드에서 "call an api"는 한 번만 실행하면 되는 로그입니다. 그러나 버튼을 클릭할 때마다 항상 실행됩니다. import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter}..

function Btn({text, changeValue}) { console.log(text, "was rendered"); return ( {text} ); } function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 첫번째 버튼을 누르면 Save Changes에서 Revert Changes로 글자가 변경됩니다. 이때 위 코드에 의하면 버튼 두 개가 모두 새롭게 렌더링됩니다. 그런..

Props Props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. Props의 특징 - 상위에서 하위로만 값을 전달하는 단방향 흐름을 가집니다. - 하위에서 프로퍼티를 수정할 수 없다는 특징을 가집니다. - props는 첫번째이자 유일한 인자입니다. ex) function Btn(props) {} - 하위 컴포넌트에서 보낸 모든 것들을 갖는 오브젝트입니다. Props를 사용한 예시 버튼을 만들 때, 동일한 style을 갖는 버튼 여러 개를 생성하고자 한다면 여러개의 버튼 컴포넌트를 생성하고 props를 통해 버튼 이름을 전달해줄 수 있습니다. function Btn(props) { console.log(props); return ( {props.banana} ); } function A..

State 위 코드를 실행하고 브라우저의 개발자 도구 Elements에서 소스 코드를 확인해보면, h3, button, div들은 업데이트되지 않고 UI에서 바뀐 부분만 업데이트 해주는 것을 알 수 있습니다. 즉, React.js는 이전에 렌더링된 컴포넌트가 어떤건지 확인하고 다음에 렌더링될 컴포넌트가 무엇인지를 확인하여 다른 부분만 파악합니다. 따라서 모든 컴포넌트를 리렌더링할 필요 없이, 바뀐 부분만 다시 렌더링한다는 장점을 가지고 있습니다. 배열 쉽게 사용하기 const food = ["tomato", "potato"] // 기존 코드 // tomato -> 'tomato' // potato -> 'potato' const tomato = food[0]; const potato = food[1]; ..

JSX란? JSX는 JavaScript를 확장한 문법으로, HTML에서 사용한 문법과 유사한 문법을 사용하여 React 요소를 만들 수 있게 합니다. 이를 통해 createElement를 대체하여 개발자들이 좀 더 편리하게 사용하도록 도와주기도 합니다. // JSX const Title = ( consol.log("mouse enter")}> Hello I'm a title ); const Button = ( console.log("im clicked")}> Click me ); // 기존 코드 const Title = React.createElement( "h3", { id: "title", onMouseEnter: () => consol.log("mouse enter"), }, "Hello I'm a..

React와 React DOM import하기 React JS Javascript를 이용하여 element를 생성하고, React JS가 그것을 HTML로 번역합니다. 즉, 바닐라 JS는 HTML -> JS 순서, 리액트는 JS -> HTML 순서 입니다. ReactDOM ReactDOM은 React element를 HTML로 바꾸는 역할을 합니다. const h3 = React.createElement("h3", {onMouseEnter: () => consol.log("mouse enter")}, "Hello I'm a span"); (element, property, content) -> 괄호 안의 내용은 다음과 같은 의미를 갖습니다.

React 설치 1. Nodejs를 검색하여 LTS 버전을 설치합니다. 이때 설치 경로는 그대로 사용하는게 좋습니다. 2. Visual Studio Code를 검색하여 설치합니다. 3. 작업용 폴더를 하나 만들어줍니다. 4. 터미널에서 3번 폴더 경로로 이동하여 아래 코드를 입력합니다. npx create-react-app 프로젝트명 // permission이 없다는 에러가 뜰 경우, 아래 코드로 입력 sudo npx create-react-app 프로젝트명 그래도 오류가 날 경우, 맨 아래 실행 오류 해결법을 참고하세요. Editor에서 프로젝트 오픈 1. Visual Studio Code 에디터를 오픈합니다. 2. File - Open Folder - 오픈할폴더명 3. App.js : 메인페이지 브..

목차 1. 반응형 웹 2. Bootstrap 3. Google Map 4. Kakap Map 1. 반응형 웹의 특징 -W3C에서 웹 표준으로 인정한 HTML과 CSS로 이루어져 있으므로, 모든 스마트 기기에서 접속 가능 -가로 모드에 맞추어 레이아웃 자동으로 변경 -사이트 유지, 관리 용이 2. 뷰포트(viewport) 뷰포트의 정의 '뷰포트'는 스마트폰 화면에서 실제 내용이 표시되는 영역을 말합니다. PC 화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문에 두 화면에서 내용이 다르게 보이는데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대/축소해 표시가 가능합니다. 웹킷(webkit) 기반인 모바일 브라우저들의 기본 뷰포트의 너비는 980px이고, 화면 크기를 고려하여 320px로 맞추어 웹사이..