상탯값과 속성값으로 관리하는 UI 데이터 리액트를 사용하지 않은 코드는 로직과 UI 코드가 복잡하게 얽혀 있어 가독성이 낮지만, 리액트를 사용하면 선언형 프로그래밍으로 코드를 작성하여 추상화 단계가 높으며 비즈니스 로직에 좀 더 집중할 수 있다. 화면의 갱신을 위해 UI 데이터는 반드시 상탯값(해당 컴포넌트가 관리하는 데이터)과 속성값(부모 컴포넌트로부터 전달받는 데이터)로 관리해야 한다. 자식 컴포넌트는 부모 컴포넌트가 렌더링될 때 같이 렌더링된다. 내려받는 속성값이 변경될 때만 렌더링되길 바란다면 React.memo를 사용할 수 있다. function Title(props) { return {props.title}; } export default React.memo(Title); 같은 컴포넌트를 두 ..

📘 중요하지만 헷갈리는 리액트 개념 이해하기 ✅ 리액트를 사용한 코드의 특징 const [todoList, setTodoList] = useState([]); // todoList -> 첫번째 아이템은 상태값 // setTodoList -> 두번째 아이템은 상태값 변경함수 useState를 사용하면 컴포넌트의 상태값을 추가할 수 있다. 매개변수는 상태값의 초기값 의미 (투두에서는 빈배열을 초기값으로 넣어줌) useState 는 배열을 반환한다. 상태값 변경함수를 호출해서 상태가 변경되면 리액트는 UI에 반영해준다. 배열을 표현할때는 key 값을 입력해줘야한다. 리액트가 화면을 효율적으로 업데이트 할 수 있다. 배열비구조화문법 비구조화문법은 각아이템을 변수로 만들 수 있다. const person = ['..

📘 리액트 프로젝트 시작하기 ✅ 리액트란 무엇인가? 페이스북에서 개발하고 관리하는 UI 라이브러리 리액트는 UI 기능만 제공 ( 앵귤러가 웹앱 개발에 필요한 다수의 기능을 제공하는 것과는 달리) 따라서 전역상태관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야한다. 전반전인 시스템을 직접 구축하기 때문에 자유롭다는 장점이 있지만, 개발 환경을 직접 구축해야하는 번거로움이 있다. 리액트 팀에서 create-react-app이라는 툴을 제공해서 어느정도 이 단점을 보완해준다. 프론트엔드 프레임워크를 사용하는 이유는? 자동으로 UI를 업데이트 해준다는 장점! UI = render(state) 라고 함축적으로 표현할 수 있다. render 함수는 순수함수로 작성하는 것이 좋다. - 순수함수는 입력값이 ..

section 1. 리액트 프로젝트 시작하기 1. 리액트란 무엇인가?💡 자동으로 업데이트되는 UI UI = render(state) render함수는 순수함수로 작성 순수함수란, 입력값이 같으면 출력값이 같은 함수 랜덤함수 사용 X 외부 상태 변경 X 순수함수와 불변변수를 이용하는 이유? 복잡도가 낮아지고, 버그 발생확률이 낮아짐. 렌더링 성능을 크게 향상시킬 수 있음. state는 불변 변수로 관리 가상 돔 (virtual dom) 이전 UI상태를 메모리에 유지한 뒤 변경된 부분만 실제 DOM에서 변경함 2. 리액트 개발 환경 구축하기💡 안녕하세요. root1 root2 root3 // 방법1. 그냥 반복해서 만들기 function LikeButton() { const [liked, setLiked] ..

React의 Event Handling Event Event를 사용할 때 주의사항 1. 이벤트 이름은 camelCase로 작성 => html의 onclick은 리액트JSX에서는 onClick 2. 이벤트에 실행 할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체를 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트 에는 이벤트를 설정할 수 없음 컴포넌트 생성 및 불러오기 1. EventPractice.js 생성과 App.js에서 EventPractice 불러오기 이벤트 핸들링 2. onChange 이벤트 설정 3. input에 입력한 값을 state에 저장 4. 입력한 ..

React 프로젝트 시작하기 1. react 프로젝트 생성하기 근데 나는 npx create-react-app hello-react를 사용했다! npx란 npx는 패키지를 한번 실행하는 것 npx로 실행하는 경우 로컬에 설치하지 않고 원격에 있는 최신 패키지를 실행할 수 있음 Webpack : 번들링 도구 번들링 도구 Browserify, RequireJS, Webpack 등이 대표적 리액트 프로젝트에서는 주로 Webpack을 사용 번들링 도구를 사용하면 require (또는 import)로 모듈을 불러 왔을 때 번들링 되면서 모듈들을 파일 하나로 합쳐 줌 src/index.js를 시작으로 필요한 파일을 다 불러온 후에 파일 하나로 합쳐 주는 것 css 파일도 Webpack의 CSS-Loader가 불러옴..