WEB (8) 썸네일형 리스트형 [React] state 1. Prop과 State Prop과 State는 모두 이 값이 변경되면 새로운 return값을 만들어서 UI를 바꾼다. 이 둘의 차이점은, prop은 컴포넌트를 사용하는 외부자를 위한 데이터 state는 컴포넌트를 만드는 내부자를 위한 데이터 2. state state를 사용하기 위해서는 {useState}를 import해주어야 한다. import { useState } from "react"; useState는 배열로 저장이 되는데, state의 값은 index 0에 저장되어 있고, state를 바꿀 때는 index 1에 있는 함수로 바꾼다. const _mode = useState('WELCOME'); const mode = _mode[0] # state(현재는 'WELCOME'이 저장) const.. [React] 이벤트 1. 이벤트1 - 인자값이 없는 경우 태그 안에 원하는 이벤트를 수행할 함수를 넣어서 사용하면 된다. function( ) 대신 arrow function 문법으로 써도 된다.(보통 이렇게 많이 씀) ## function( ) # Header 컴포넌트 function Header(props) { return ( {props.title} ); } # function App() function App() { return ( ); } ## arrow function # Header 컴포넌트 function Header(props) { return ( { event.preventDefault(); props.onChangeMode(); }} > {props.title} ); } # function App() f.. [React] Props 1. Props props는 데이터를 전달하기 위해 사용한다. 아래의 코드를 보면, {props.title}를 통해 Header 컴포넌트를 사용할 때 title로 주었던 REACT라는 데이터를 전달해주었다. # Header 컴포넌트 function Header(props) { return ( {props.title} ); } # Header 컴포넌트 사용 function App() { return ( ); } 2. Props 활용 topics라는 배열을 만들고, for문을 사용해 배열에 있는 내용들을 리스트로 만들었다. for문에 있는 t는 props.topics[i]으로 각 배열의 요소들을 나타내고, t.id와 t.title은 각 요소에 있는 id값과 title값을 받아와서 리스트를 구성하도록 한다. .. [React] 컴포넌트 만들기(사용자 정의 태그) React = 사용자 정의 태그를 만드는 것 컴포넌트 = 사용자 정의 태그 1. 컴포넌트(=사용자 정의 태그) 만드는 법 태그를 함수로 만들어서, return 값에 태그 내용을 써넣는다. 이 때 컴포넌트는 대문자로 시작해야한다 컴포넌트를 만들어 사용하면, 해당 컴포넌트를 사용하는 모든 곳에 한 번에 수정을 할 수 있게 된다. 2. 사용한 전체 코드 import logo from "./logo.svg"; import "./App.css"; function Header(props) { return ( {props.title} ); } function Nav() { return ( html css js ); } function Article(props) { return ( {props.title} {props.. [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 목록의 요소 삭제하기 [취소선 만들기]에서 썼던 addEventListener()를 사용해서 delItem이라는 함수로 목록의 요소를 삭제할 수 있도록 했다. 1. function.bind(thisArg, arg1, arg2, ···) bind 매서드를 사용하면, 함수의 컨텍스트를 변경하거나, 함수에 초기 인수를 설정하는 등의 작업을 할 수 있다. 여기에서 func.. [JavaScript] To-do List 만들기 - 2 (취소선 만들기) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 취소선 만들기 체크박스의 상태를 알 수만 있으면 checked 또는 unchecked의 상태에 따라 취소선을 긋거나 지우면 되기 때문에 크게 어려운 일은 아니었다. addEventListener() 을 사용해 체크박스의 체크여부에 따라 취소선을 그릴 수 있도록 만들었다. 1. addEventListener(eventType, callback) 웹 페이지에서 특정 이.. [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 아래 코드는 1~4번까지 완료된 코드이다 To-Do List 리스트의 marker를 체크박스로 바꾸는 과정에서 어려움을 겪었는데, 이 문제는 CSS default로 설정되어 있는 disc 형태의 marker를 삭제하고(list { list-style-type: none; }), JS checkbox 요소를 추가해주면 된다. (for문의 createElement) 이.. [JavaScript] 반복문과 함수 반복문으로 모든 a 태그를 찾아 a 태그의 style을 바꿔주었다. 또한, a 태그의 style을 바꿔주는 부분을 함수로 만들어서, 같은 내용을 반복해 사용할 경우에도 코드가 중복되지 않도록 했다. 1. 반복문 WEB hello world CSS JavaScript 자바 스크립트를 활용해 다크모드&라이트 모드 만들기~ 위 코드에서 onclick 안에 있는 코드가 while문을 활용해 모든 a 태그를 찾고, dark모드가 될 경우엔, 글씨 색을 powderblue로, light모드가 될 경우엔, 글씨 색을 blue로 바꾸어 주었다. document.querySelectorAll('a')은 모든 a 태그를 찾아 배열에 담아주는데, 반복문을 통해 배열에 담긴 모든 a 태그의 style을 바꿔줄 수 있다. 2... 이전 1 다음
