728x90 반응형 리액트15 리액트 - 스크롤에 따라 변경되는 드랍다운 컴포넌트 만들기 포트폴리오의 메뉴 부분을 작업하는 도중 드랍다운 메뉴가 필요해져 재사용성을 위해 컴포넌트로 따로 빼면 좋을 것 같아서 구성해보았다. 작업에 들어가기 전 2가지를 최우선적으로 생각하고 작업하였다. 1. 드랍다운 children에 유저가 원하는 컴포넌트를 넣을 수 있게 2. 영역(화면) 밖으로 나가면 화면 안으로 구성될 수 있게 ( 스크롤 포함 ) 드랍다운을 단순 메뉴로 쓰는 경우도 많지만 메뉴안에 checkbox, radio와 같은 다양한 요소들이 들어가는 경우도 많았다. 이를 위해서 드랍다운의 내용은 드랍다운 컴포넌트를 호출하는 부모 컴포넌트에서 정의하고 드랍다운 컴포넌트에는 껍데기만 제공하는 방식으로 구성하였다. 물론 전체적인 디자인은 비슷해야되기때문에 틀이되는 css는 dropdown.css에서 작성.. 2023. 12. 3. 리액트 - useEffect ( vue의 watch 랑 비슷한 걸까? ) useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 사실 해당 정의만 보면 뭔소릴까...라는 생각이 들긴한다 렌더링 될 때 특정 작업이면 리렌더링 될때도 특정 작업을 실행하는 것인가? 아니면 초기 렌더링일때만 작업이 실행되는 것일까의 두가지 의문이 들 수 있다. 살펴보니 크게 3가지 경우의 수가 있다. 1. 초기에 컴포넌트가 렌더링될 때 한번 실행되고 이 후로 다시 호출 되지 않음 2. 컴포넌트가 재렌더링 될 때마다 실행 3. 특정 변수의 값이 변경될 때마다 실행 어 이거 약간 Vue의 watch 느낌아닌가? 싶은데 동작방식이 조금 다른 것 같다 useEffect는 렌더링이 완료된 이후에 실행! watch는 데이터가 변경되는 것과 동시에 콜백함수를 실행한다. 둘다.. 2023. 11. 30. React - Form Handling ( 추가, 수정, 삭제 ) 객체 배열의 추가, 수정, 삭제는 배열 추가, 수정, 삭제와 동일하게 새로운 객체 배열을 만들어서 진행한다. 그래야 리렌더링이 발생한다! import { useState } from 'react' import BookCreate from './components/BookCreate'; import BookList from './components/BookList'; function App() { const [books, setBooks] = useState([]); // 추가 const createBook = (title) => { const updatedBooks = [ ...books, { id: Math.round(Math.random() * 9999), title: title } ] setBook.. 2023. 1. 9. React - 이벤트를 사용하여 state 변경 이벤트 사용 어떤 이벤트를 watch 할 지 결정 함수를 생성, event handler callback function naming convention : handle_event name → community convention pass prop to plain element pass function using a valid event name! → 헷갈리는 경우 react docs를 참고하여 정확한 이벤트 이름을 보낼 것 pass reference to function const doGreeting = () => { return 'Hi there' } Hi! console.log('1번: ', doGreeting) -> 함수를 호출 하지않음 console.log('2번: ', doGreeting()).. 2022. 12. 21. React - reusable components(with. bulma.css) Parent component | (props) Child component Props System pass data : one way 부모가 자식 컴포넌트를 다르게 구성 할 수 있게 한다. add JSX element 리액트는 구성요소를 하나의 객체로 묶는다 color ="red"→ {color: "red"} child의 첫번째 인자로 넘긴다 해당 인자로 넘긴 props를 사용한다. //부모 컴포넌트 import 'bulma/css/bulma.css' import React from 'react' import ProfileCard from './ProfileCard'; //js파일은 확장자 필요없음 import AlexaImage from './assets/images/alexa.png'//js파일이 .. 2022. 12. 15. React - jsx(JavaScript Xml) JSX란? const element = Hello, world!; //HTML인가 자바스크립트인가...? 리액트에서 쓰는 자바스크립트의 확장형이다. 자바스크립트지만 공식 자바스크립트가 아니기 때문에 브라우저에서 읽을 수 없다. 코드가 번들링 될 때 Babel을 사용하여 자바스크립트로 변환된다. JSX를 꼭 써야하는 것은 아니지만 유지보수에 도움이 되며 에러를 줄일 수 있기 때문에 쓰는 것을 추천한다. 또한 코드 작성에 있어서 굉장히 편하다 jsx를 사용하지 않는다면 복잡한 컴포넌트의 경우 수많은 React.creatEelement 가 잔뜩 적힌 파일들을 보게될 것…! Rule of JSX 변수를 사용할 때는 {}로 감싸주어야한다. Boolean, undefined, null값은 표시되지않는다. 배열의 경.. 2022. 12. 13. 이전 1 2 3 다음 728x90 반응형
