인강/노마드코더 (4) 썸네일형 리스트형 [노마드코더] React Hooks https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=1 ✅ useState초기값이 연산이 많이 필요하다면콜백함수를 사용하여 return하자.=> 렌더링이 한번만 일어남.const Init = () => { const heavyCost = "오래걸리는 작업"; return heavyCost;};const App = () => { const [value, setValue] = useState(Init()); }; ✅ useEffectMount: 화면에 첫 렌더링Update: 다시 렌더링Unmount: 화면에서 사라질 때 deps: dependency array 1. useEffect 인자.. [노마드코더] React Custom Hooks ✅ 비구조화 할당, 구조 분해: event를 다른 함수로 분리할 수 있다. Ex) 이벤트를 분리한 파일, 다른 entity에 연결하여 처리할 수 있음.const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); return { value };};const App = () => { const name = useInput("Mr."); return ( Use Hooks );};=> useInput이 반환하는 모든 것을 ...name을 통해 풀어준다.(packing/unpacking) 💯💯💯 객체의 비구조화 할당const { newValue } = e;con.. [노마드코더] React 클론코딩 movie-app React를 사용하기 위해서react, react-dom 라이브러리를 import 해주어야 함. react: 엔진과 비슷함. interactive한 UI를 만들 수 있게 해줌. element 생성, eventListener 추가.react-dom: 모든 React element들을 HTML 태그 부분에 둘 수 있도록 해줌. (JavaScript를 HTML element로 바꾸는 과정)=> render() : React element들을 HTML로 만들어 배치한다. 사용자에게 보여준다. React 규칙1. HTML 코드를 직접 작성하지 않는다.JavaScript로부터 시작해서 HTML이 생성됨. => JavaScript를 활용하여 element를 업데이트 할 수 있다.유저에게 보여질 내용을 컨트롤 할 수.. [노마드코더] HTML, CSS, JavaScript 클론코딩 chrome-app HTMLHyper Text Mark-up Language: 구조를 만들고 요소를 적어넣기cssCascading Style Sheet : 만들어진 HTML을 조립,꾸미고 정렬하는 언어 HTML, CSS: 로그인 구현 X, 검색 기능 X, 단순히 페이지를 나타낸다. JavaScript: 브라우저가 가지는 HTML을 읽어옴. 브라우저 환경에서는 자바스크립트가 HTML에 연결되어 있음. 자바스크립트는 HTML의 element를 가져오고 변경할 수 있음. ✅ eventListener를 사용하여 이벤트가 발생하는 순간에만 function이 실행되도록 함.const title = document.querySelector("div.hello:first-child h1");function handleTitleClick.. 이전 1 다음