CSS in JS CSS 스타일을 JavaScript 코드 안에서 정의하고 관리하는 방식을 말한다! CSS 클래스 이름이나 인라인 스타일을 직접 작성하는 대신, JavaScript 객체를 사용하여 스타일을 정의하고 관리할 수 있다. 컴포넌트별 스타일 관리 : 컴포넌트별로 스타일을 관리할 수 있다. 이를 통해 스타일의 재사용성을 높이고, 스타일 충돌 문제를 해결할 수 있다. JavaScript의 기능 활용 : JavaScript의 기능을 활용하여 동적으로 스타일을 변경할 수 있다. 코드 유지 보수성 : 스타일을 정의하는 코드와 해당 스타일을 사용하는 코드가 함께 있어서 코드 유지 보수성이 높아집니다. 리액트에서 CSS in JS를 구현하는 방법으로는 다양한 라이브러리가 있다. 대표적으로 Styled Com..

Today I Learned 오늘의 학습 내용 리액트 숙련 강의 수강 리액트 TODO 프로젝트 리팩토링 1 새로운 배움 Css in JS 리액트를 리액트답게 사용하기 실제돔 접근 vs 가상돔 접근 문제 상황과 시도, 해결 리액트 숙련 주차 첫시간에 CSS in JS에 대해 배웠다. CSS를 javascript 코드로 작성하는 것을 도와주는 라이브러리들로 대표적인 styledComponent의 기본적인 사용법도 익혔다. 기술매니저님 코드 리뷰를 통해 리액트 프로젝트 코드를 리뷰 받았다. 말씀해주신 수정사항들을 코드에 반영하였다. 처음 작성했을때 보다 코드가 깔끔해졌다. 처음엔 state를 많이 관리하고 있었는데 중복되는 state들을 줄여보는게 좋을것 같다고 말씀해주셔서 시도하고있었다. 객체를 담은 배열자..

이번 주 배운 내용 리액트 기초 개념 (컴포넌트, props, state, 가상돔) 간단한 todo 서비스 만들기 느낀점 리액트를 정말 하나도 모르고 시작해서 모두 새로운 개념이었다. 첫날은 JSX 문법도 처음 봐서 과연 할 수 있을까 싶었지만 둘쨋날에 그날 배운 내용으로 투두 서비스를 만들고자 하는 목표를 가지고 개념을 익혀나가니 더욱 재미있었다. 특히 처음에 새로운 개념을 알게되면 그 개념과 관련해서 꼬리질문들이 생기기 마련인데 개념을 차근차근 익혀나가니 처음에 가졌던 의문들에 대해 답을 얻을 수 있어서 즐거웠다. 리액트의 랜더링과 가상돔 개념에 대해 처음 알게 되었을때 (랜더링 과정에 있어서 실제돔과 가상돔을 만든 다음 구분하여서 달라진 부분만 리랜더링 시켜준다는 개념이었다.) 그럼 비교는 어느 시..

state란 리액트에서 데이터를 다루는 대표적인 방법으로 props와 state가 있다. props는 부모 컴포넌트에서만 수정 가능하며 자식 컴포넌트는 읽기만 가능한 단방향 데이터 메커니즘이다. 반면 state는 컴포넌트 내부에서 변경 가능한데이터이다. 단어 그대로 상태값을 의미하는데 기존의 자바스크립트나 개발언어에서도 필요하다면 다양한 상태값을 선언하고 사용하였다. 하지만 리액트에서는 상태라는 개념은 가상돔 개념과 연결되면서 상태의 변경이 발생할 경우 UI를 리 랜더링 하게 되는 기준값이 되었다. 즉, state는 컴포넌트 내부에서 변경 가능한 값이며, 변경이 일어날 경우 화면이 리랜더링 되도록 하는 기준값이라는 것. 함수형 컴포넌트에서 state 사용하기 리액트 이전 버전에서는 클래스형 컴포넌트에서만..

Props란 리액트 공식 웹사이트에 따르면 props는 읽기전용으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것이다. props는 property의 준말이며, 객체 형태로 자식 컴포넌트에 전달되는 데이터를 담고 있다. props는 전달하는 주체인 부모 컴포넌트가 결정하고 받아서 사용하는 자식 컴포넌트는 수정하거나 삭제 할수 없다. 그러기 위해선 state라는 개념이 필요하다. 즉, 리액트에서 단방향으로 데이터를 전달하는 매커니즘을 뜻한다. props 전달 /* 부모 컴포넌트 */ function App() { return ; } /* 자식 컴포넌트 */ function Hello(props) { return Hello, {props.name}!; }App 컴포넌트에서 Hello 컴포넌트를 불러..

JSX란 리액트 공식 웹사이트에 따르면 JSX란 JavaScript 확장 문법이다. React에서 UI를 만들기 위해 사용되는 문법으로 JSX 코드를 작성하면 웹팩의 로더(babel과 같은)를 통해 번들링되면서 일반적인 JavaScript 코드로 변환된다. 웹팩의 로더는 직접 설치하는 과정이 필요하지만 React 프로젝트 생성을 도와주는 CRA로 번거로운 작업을 대신 할 수 있다. React 프로젝트 생성 후 기본적으로 설정되어 있는 src/App.js를 살펴보자. function App(){ /* 생략 */ return ( Edit src//App.js and save to reload. Learn React ) } src/App.js는 현재 React 프로젝트에 App이란 컴포넌트를 생성하고 있다. ..