반응형 전체 글131 7.0부터 Todolist map() 사용법 - 배열 각각의 element를 바꾸고 싶을 때 배열.map(function) - map의 괄호 안에 function은 array의 모든 item에 대해 실행되는 함수 - 그 함수에서 return한 값이 새로운 array에 들어가 있다. map은 함수의 첫 번째 매개변수로 현재의 item을 가지고 올 수 있다. import { useEffect, useState } from "react"; import Button from "./Button"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setTo.. 2022. 3. 27. 6.0부터 1. state 2. props 3. useEffect import { useState } from "react"; import Button from "./Button"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev+1); return ( {counter} click me ); } export default App; component render되는 경우 - 처음으로 화면 refresh 할 때 - component의 state가 변화할 때 (state를 change하고, 그럴 때마다 모든 것이 다시 실행됨) 만약! component가 처음 render될 때만 코드.. 2022. 3. 24. [영화 웹 서비스]CREATE REACT APP (CRA) 1. create-react-app - 리액트 어플리케이션을 만드는 방식 - 많은 스크립트들과 사전설정들이 준비되어 있다. - 개발 서버에 접근, 자동으로 새로고침, 즉각적으로 어플리케이션 안에 CSS 포함 설치 1) nodejs 설치 - cmd창에 node -v으로 확인 : node.js 제대로 깔았는지 확인 - cmd창에 npx로 확인 : npx 커맨드를 실행시킬 수 있는지 확인 2) npx create-react-app {project name} cd {project name} npm start 3) code {project name} vscode로 폴더가 열린다 package.json 에서 모든 스크립트를 찾을 수 있다. 실행시킬 수 있는 script terminal에서 npm run npm st.. 2022. 3. 18. [영화 웹 서비스]Props isolation encapsulation 부모 App 에서 자녀 MinutesToHours, KmToMiles 등의 자식 컴포넌트에게 부모 컴포넌트의 데이터를 필요로 하지 않는다. *부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기 -함수형 컴포넌트 -버튼 틀(스타일)을 만들어 놓고, 이후에 "새로운" 정보를 이 Btn 컴포넌트에 전송한다. 함수에서 props(매개변수) 에서 매개변수는 로부터 전달 받는 properties reactjs는 자동으로 에 넣는 모든 property(prop)들을 오브젝트 안으로 넣는다 함수에서 props는 오브젝트이다. 아까 전달받은 모든 것들을 갖는 오브젝트이다. {props.변수이름}으로 오브젝트 안의 여러 변수 중 원하는 변수에 접근 가능 하나의 컴포.. 2022. 3. 18. [영화 웹 서비스]State State - 데이터가 저장되는 곳 !!! 이전 단계의 state를 이용해서 현재 state를 바꾸려 했지만, 결과가 예상과 다르게 나올 수도 있음. 다른데서 바뀌었을수도 있다는 말. state를 바꾸는 2가지 방법 1. setState 함수 - 원하는 값을 직접 넣어준다 setCounter(counter+1); setCounter(90); 2. 이전 값을 바탕으로 현재 값을 계산 - 함수를 전달하기 setCounter((current) => current+1); useState 1. 사용자들의 input을 어떻게 얻는지 2. form을 만들었을 때 state는 어떤식으로 작용하는지 주의!!! class, for 등 이미 js에서 사용하는 단어는 jsx에서 html용으로 사용하면 오류가 난다. html의.. 2022. 3. 18. [SQL] 문법 정리 SELECT문 SELECT select_list [ INTO new_table ] [ FROM table_source ] [ WHERE search_condition ] [ GROUP BY group_by_expression ] [ HAVING search_condition ] [ ORDER BY order_expression [ ASC | DESC ] ] INTO : 조건에 맞는 기존 테이블의 열 내용을 새 테이블로 가져와 테이블을 만드는 것 GROUP BY : 그룹 ORDER BY : 정렬 HAVING: 특정 컬럼을 그룹화한 결과에 조건을 걸 때 사용 WHERE는 그룹화 하기 전, HAVING은 그룹화 한 후에 조건 프로그래머스 예제 1. 모든 동물의 정보를 ANIMAL_ID 순으로 조회 SELECT.. 2022. 3. 16. 이전 1 ··· 18 19 20 21 22 다음 반응형
