728x90 React15 과제 테스트 회고 - 4일간의 테스트동안 나는 과연 뭘 얻었나 4일동안 개발 가능한 테스트를 과제로 전달받았다.가장 고민이 많았던 부분은 알집을 풀어서 해당 알집들의 파일을 트리로 구현하는 것이였다.최적화를 어떻게 해야될 지 코드 짜는 와중에도 제법 시간을 할애했던 것 같다. 이 부분을 제외한 다른 부분은 사실 큰 어려움이 없었다.번들사이즈를 최소화하고 초기 렌더링 시에 불필요한 렌더링 안하게 하고 최대한 빠르게 유저가 볼 수 있도록 했다. 트리 최적화 방식 고안depth가 굉장히 깊을 경우를 고려해서 root 경로에 있는 폴더와 파일만 보여주기로 결정했다.Viewport 기준으로 렌더링 하는 방식도 추가로 고려했어야함폴더 클릭 시 그때 그때 하위 파일들을 보여줌 → Lazy loading한번 클릭한 폴더의 하위 파일은 caching{ { name: "fo.. 2025. 5. 16. 리액트 - 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 반응형
