본문 바로가기

jsx3

[TIL] 내일배움캠프 React 과정 2022.12.08 Today I Learend React 숙련 강의 수강 React 입문 과제 코드 리뷰 후 피드백에 따른 수정 React 숙련 강의 CSS-in-Js란? CSS-in-JS방식이란, 단어 그대로 자바스크립트로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식을 말한다. styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지인데 SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행된다. styled-components의 기본적인 사용법 // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-com.. 2022. 12. 8.
[TIL] 내일배움캠프 React 과정 2022.12.07 Today I Learned 리액트 입문 개인 과제 - My Todo List 만들기 리액트 입문 과제 리뷰 특강 시청 My Todo List 구현하기 배열에서 특정 객체의 프로퍼티 값만 수정하기 const [todo, setTodo] = useState([ {id: 1, title: '운동하기', content: '테스트1', isDone: false}, {id: 2, title: '마라탕 먹기', content: '테스트2', isDone: false}, {id: 3, title: '잘 쉬고 공부하기', content: '테스트3', isDone: false}, ]); 이 배열에서 투두리스트의 완료 버튼을 눌렀을 때 그 id 값을 가진 객체만 isDone: true로 바꿔주는 것이 내가 구현하고 싶은.. 2022. 12. 7.
[TIL] 내일배움캠프 React 과정 2022.12.05_React 입문 Today I Learned React 입문 강의 수강 ES6 문법 특강 수강 React 입문 강의 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트해야 하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다. Virtual Dom (가상 돔)이란? 실제 DOM은 조작이 일어나면 바로 브라우저를 통해 여러가지 랜더링 단계를 거치게 된다. 하지만 메모리상에 그냥 값으로 존재하는 가상 돔은 변경이 일어나도 이것이 브라우저 렌더링과는 직접적으로 연결되어 있지 않다. 즉, 리액트가 가상 돔의 변화를 실.. 2022. 12. 5.

티스토리툴바