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}..

Create-React-App Create-React-App은 많은 스크립트와 사전설정을 통해 ReactJS를 사용하기 훨씬 쉽게 해줍니다. 개발 서버에 접근하거나, 자동으로 새로고침을 하거나, 어플리케이션에 CSS를 즉각적으로 포함시켜주는 등 다양한 기능을 제공합니다. 1) node.js 설치 2) 콘솔에 node -v 입력 노드 버전이 뜬다면 설치가 정상적으로 완료된 것입니다. 3) 콘솔에 npx 입력 정상적으로 작동된다면 준비가 완료된 것입니다. 4) npx create-react-app 생성할어플리케이션이름 '생성할어플리케이션이름'으로 어플리케이션 폴더가 생성된 것을 확인할 수 있습니다. 5) vscode에서 생성된 어플리케이션 폴더를 열어줌 6) 터미널에 npm start를 입력 developm..

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 : 메인페이지 브..

흐름제어 return '함수를 종료'하고 값을 '반환'하는 역할을 합니다. break 반복문 내의 구문이 실행되는 중간에 즉시 반복문을 '종료'하고 다음 구문으로 넘어가는 역할을 합니다. continue 다음 반복 조건으로 즉시 넘어가는 역할을 합니다. fun main() { for(i in 1..10) { if(i==3) continue println(i) } } 코틀린은 다중 반복문에서 break나 continue가 적용되는 반복문을 label을 통해 지정할 수 있습니다. fun main() { loop@for(i in 1..10) { for(j in 1..10) { if(i==1 && j==2) break@loop println("i : $i, j : $j") } } } 논리연산자 논리연산자(log..

반복문 조건형 반복문 조건이 참인 경우 반복을 유지하는 반복문입니다. while fun main() { var a = 0 while(a