ksw_devlog

useState('초기값') => [state데이터, state데이터 변경함수] -> const [state, setState] = useState(' '); state : 1. 변수 대신 쓰는 데이터 저장공간 2. useState()를 이용해 만들어야함 3. 문자, 숫자, array, object 다 저장가 const [state, setState] = useState(['aaa', 'bbb']); ==> 배열도 가능 {state[0]} -> aaa // {state[1]} -> bbb state에 데이터 저장해놓는 이유 : 웹이 App처럼 동작하게 만들고 싶어서 state는 변경되면 HTML이 자동으로 재렌더링이 된다. 그냥 변수는 변경되어도 자동 재렌더링이 안됨 state 변경하는법 (등호로 변경금..

form tag, placeholder ////https://www.nextree.co.kr/p8428/ textarea form태그는 submit을 했을 때 페이지가 리로드 된다 -> event.preventDefault(); ----- { event.preventDefault(); const title = event.target }}> event.target : 이 이벤트가 발생한 태그를 가리킨다 -> form 태그! 상태로 만들 데이터가 원시적 데이터라면 그대로, 상태로 만들 데이터가 범객체라면 -> '복제' newValue = {...value} => value 객체 복제 / newValue = [...value] => value 배열 복제 newValue 변경 -> 오리지날 데이터말고 복제본을 ..

JSX 문법 : html도 있고 함수도 같이 씀 html 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만든다 -> 이 세트를 컴포넌트라 한다 -> 리액트는 컴포넌트를 여러개를 만들어서 가져다가 쓴다 -> 코드의 재활용성을 높인다. 자동으로 값이 업데이트되면 UI도 업데이트 되는 게 효율적 변수가 많으면 좋지 않음 -> 변수는 잠깐 저장해주는 값 변수 업데이트 신경X, state 바뀌면 -> UI 렌더링, state가 바뀌면 UI가 업데이트됨 {useState} : 리액트에서 제공하는 유용한 함수 중 하나 -> 리액트 훅 function App() { let count = 0 const [count2, setCount2] = useState(0) const increase = () =>{ count = c..

리액트 './App' -> .(점)은 현재 디렉토리를 나타낸다. 리액트는 사용자정의태그를 만드는 기술이다. 사용자정의태그를 만들 때 -> 함수를 만들어준다 리액트에서는 태그 앞글자는 '대문자'로! 리액트에서는 사용자정의태그를 컴포넌트(Component)라는 표현을 쓴다. function Header() { return WEB } function App() { return ( ); } ------------------------------------------------------- function Header() { return React } function Nav() { return html css js } function App() { return ( ); } [props] 리액트에서는 속성을 PRO..

리액트 부모, 자식 Component import React from "react"; function Child() { return 연결 성공!; } function Mother() { return ; } function GrandFather() { return ; } function App() { return ; } export default App; Props : 부모 Compoent로부터 받아온 데이터 function Mother() { const name = "홍부인"; return ; } function Child(props) { console.log(props); return {props.motherName}; } 부모에서 자식 컴퍼넨트로만 프롭스를 전달할 수 있음 파라미터 이름을 꼭 prop..

객체 객체: 순서없이 정보를 저장, 이름이 있는 정리정돈 상자 객체는 중괄호 {} , 배열은 대괄호[] 객체는 key , 배열은 index(순서가 있기 때문) let profile = { 'name' : 'kimsw', // -> key값 'age' : '27', 'where' : 'nowongu' } document.write('name : ' +profile.name+' ') document.write('age : '+profile.age+' ') profile.number = '7726' document.write('number :'+profile.number+' ') profile.phone_number = '01027427726' document.write('phone_number :'+prof..

[자바스크립트 함수] 함수 -> 코드가 복잡해지는 과정을 해결할 수 있다 함수 기본적인 문법 ex) function two() { document.write('2-1') document.write('2-2') } document.write('1') two() document.write('3') two() two()라는 함수를 지정해주고 document.write ~~ 쓰는 대신 two()를 써준다 입력 -> parameter -> 매개변수 argument -> 인자 return -> 출력 Parameter & Argument function onePlusOne() { document.write(1+1+' ') } onePlusOne() function sum(a, b) { document.write(a+..

[DOM 기초] DOM(Document Object Model) : 다큐멘트를 오브젝트로 만드는 모델 // touch sample.js // 접근, 제어 () -> 메소드 : 어떤 것에 접근~ -> 호출의 주체 document 부터 쓰는 이유 -> document부터 시작하기 때 getElementbyId getElementsByClassName 노드 -> 속성, 메소드 --------------------------------------------------------- [리팩토링(Refactoring)] 코드의 비효율적인 것을 제거하는 것. 중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것 리팩토링을 통해 코드의 중복을 제거한다. ex) document.querySelector('body')를 ta..