전체 글57 [react] useState 사용 시, 주의할 사항 ✨ state는 바로 변경되지 않는다. setState를 사용했다고 해서, 바로 state의 값이 변경되는 것은 아니다. setState를 사용하면, 새 state값을 받아서 컴포넌트 리렌더링 큐에 등록한다. - 다음 리렌더링 시, useState가 반환하는 첫번째 값은 갱신된 최신 state가 된다. 즉, 다음 리렌더링 시에 useState가 호출되면서 돌려주는 값이 업데이트된 state값이 된다. setState 사용 시, 바로 업데이트 하지않는 이유는 성능 향상 때문이다. 성능 향상을 위해 state를 setState호출 시마다 계속 업데이트하는 것이 아니라, 모아두고 한 번에 업데이트를 진행한다. 이를 Batching이라고 한다. https://12ahn22.tistory.com/entry/Rea.. 2022. 12. 27. [UXUI] 기본 개념과 프론트엔드 개발자가 알아야하는 UIUX ✨ UI, User Interface 사람들이 상호작용하기 위해 사용하는 시스템을 의미한다. 그래픽 요소 외에도 키보드, 마우스, 마이크 등의 물리적인 요소도 사용자 인터페이스라고 할 수 있다. 현대 사회에서는 GUI(Graphic User Interface)가 많이 중요해졌다. - 터치 스크린 등 기술의 발전으로 많은 분야에서 GUI를 사용하게됨 ✨ UX, User Experimence 사용자가 제품, 서비스를 직간접적으로 이용하고 느끼는 모든 총체적인 경험을 말한다. 사용자가 느끼는 모든 것을 포함한다고 보면 된다. 서비스 자체에 대한 경험, 홍보, 접근성, 사후 처리에 대한 경험 등등.. ✨ UX, UI의 관계 UX 내부에 UI가 들어간다고 생각할 수 있다. UI가 좋다고해서 UX가 반드시 좋다는 .. 2022. 12. 19. [react] 조건부 렌더링에 대한 고민.. 오늘 과제를 진행하면서 조건부로 렌더링을 해야하는 경우, 조건이 너무 많다면 어떻게 렌더링을 해야할까?라는 생각이 들었다. 조건이 적다면 if문을 써서 분기처리를 해주면 되지만 만약 조건이 너무 많은 경우 위 코드에서 if문이 계속 계속 늘어나게 될 것이다. 그렇다면 코드가 너무 길어 보기 싫어질 것이다. 조건이 많다면 어떤 방법을 쓰는 것이 좋을까? ✨ switch-case 방식 switch-case를 사용하면 그래도 if문 보다 코드가 읽기 쉽다고 생각한다. 이런 부분은 주관이라 다를 수 있지만 반복적으로 type === "타입"을 반복적으로 적어주지 않아도된다. const Item= ({type})=>{ switch(type){ case 'png': return case 'jpg': return /.. 2022. 12. 16. [React 18] Batching 배칭 🎉 배칭이란? React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. batch의 의미 자체가 일괄처리다. 🎉 리액트 배치 예시 하나의 클릭 이벤트 안에 두 개의 state 업데이트(setState)를 가지고 있다면 React는 이 작업들을 배칭하여 하나의 리렌더링으로 만든다. 아래 코드는 버튼을 누를 때 마다, count와 flag 상태가 변경되지만 리렌더링은 단 한번만 수행한다. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount((c) => c + 1); // 아직 리.. 2022. 12. 12. [개행 문자] 읽어온 json 파일과 js 문자열이 같은 데도 계속 다른 경우 페어 과제 진행 중에 user1.json 파일을 readFile로 읽어서 가져온 후, 가져온 data와 테스트 코드에 있는 값이 눈으로 보기에는 똑같았는데 계속 다르다는 오류가 발생했다. 오류 해결 과정과 원인을 블로그로 남긴다. ✨ 그래서 어떤 오류냐면... const user1txt = `{ "name": "김코딩", "age": 26, "sex": "Male", "company": { "name": "코드스테이츠" } }`; test("callback 두번째 인자에 파일 내용이 전달되어야 합니다", (done) => { getDataFromFile(jsonPath, (err, data) => { expect(err).toBeNull(); expect(data).toBe(user1txt); done(.. 2022. 11. 23. [js] 프로토타입 체인 🎉 프로토타입 체인이란? 자바스크립트는 객체의 프로퍼티와 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 프로토타입 참조를 따라가 자신의 부모역할을 하는 프로토타입 객체의 프로퍼티를 순차적으로 검색한다. = 이를 프로토 타입 체인이라고한다. 프로토타입 체인은 프로토타입 기반 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다. 🎉 프로토타입 체인 예시 class Animal { constructor(name) { this.name = name; } getName() { return this.name; } } class Cat extends Animal { say(){ console.log("야옹"); } } Cat 클래스의 인스턴스인 cat이 어떻게 Animal 클래스가 가지고.. 2022. 11. 21. 이전 1 2 3 4 5 6 ··· 10 다음
