ksw_devlog

리액트로 모달창 만들기 [동적인 UI 만드는 step] 1. html css로 미리 디자인완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 작성 (조건문 등으로) {중괄호} 안에는 if문 사용불가 -> html 중간에 조건문 쓰려면 삼항연산자 { modal == true ? : null // null은 비어있는 html용으로 자주사용 } [반복문으로 같은 html 반복생성하는 법] map()사용법 1. array 자료 갯수만큼 함수안의 코드 실행해줌 2. 함수의 파라미터는 array안에 있던 자료임 3. return에 뭐 적으면 array로 담아줌 map()으로 같은 html 반복생성하는 법 ({중괄호}안에서는 for문말고 map함수 사용) { title.map..

[리액트] JSX문법 1. class 대신 className 2. 변수 넣을 땐 {중괄호}, 데이터바인딩은 {중괄호} 3. style 넣을 땐 style={{스타일명 : '값'}} +카멜케이스 (ex. font-size => fontSize) return() 안에는 병렬로 태그 2개 이상 기입금지 자료 잠깐 저장할 땐 변수, state 써도 됨 state 만드는 법 1. import{useState} 2. useState(보관할 자료) 3. let[작명, 작명] 왜 state 써야할까? -> 변동시 자동으로 html에 반영되게 만들고 싶으면 state를 써야한다. 일반 변수는 갑자기 변경되면 html에 자동으로 반영안됨 state는 갑자기 변경되면 state쓰던 html은 자동 재렌더링됨 onClick(..

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