전체 글5 React 완벽 가이드 Session 4 모듈 소개 이번 섹션에서는 사용자와의 상호작용, 클릭하거나 텍스트 입력창에 입력하기 같은 사용자 이벤트 다루기, state에 대해 배워본다. 리액트의 필수적인 중요개념을 배운다. 이벤트 리스닝 및 이벤트 핸들러 수행하기 이벤트 핸들러 props는 값으로 함수가 필요하고, onClick 과 같은 이런 모든 다른 on props에 대한 값으로 전달된 함수는 이벤트가 발생할 때 실행한다. 상수로 함수를 정의한 다음 이벤트 헨들러의 함수를 실행시킬 수 있다. const clickHandler = () => { console.log('Clicked!!') }; Change Title 요소에 이벤트가 지원된다면 on 다음에 이벤트명 props를 추가해서 리액트로 리스너를 쓸 수 있다. 함수의 이름 짓기 이벤트에서 .. 2022. 8. 9. React 완벽가이드 Session3 모듈 소개 Module Content React Core Syntax Working with Component Working with Data 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가? 모든 종류의 웹 프로그래밍은 컴포넌트로 나눌 수 있다. 왜 컴포넌트를 쓰는가? 코드의 재사용성, 우려사항들과의 분리 리액트 코드는 "선언적 방식"으로 작성되었습니다! 컴포넌트는 어떻게 작성하는가? HTML, CSS, Javascript를 결합하는 것이 컴포넌트이다. React & Component 실제 웹페이지에서 어떤 요소가 추가되거나, 삭제되고, 업데이트되어야하는지 해결하는 것 최종상태와 최종상황에서 어떤 상태가 사용되어야하는지 정의하면된다. 선언형 어떻게 해야하는지 보다 무엇과 같은지 설명하는 프.. 2022. 8. 8. React 완벽가이드 Session 10 모듈 소개 Effects, Reducers & Context "Side Effects"이란 무엇이며 useEffect를 소개합니다 애플리케이션에서 일어나는 모든 것 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEffect(()=>{ ...}, [ dependecies]); 첫번째 인자는 함수로, 모든 컴포넌트 평가 후에 실행되어야 하는 함수 두번째 인자 배열이 변경될 때마다 함수가 실행된다. ⓐ 두번째 인자가 빈 배열일 때 useEf.. 2022. 8. 4. React 완벽 가이드 Session 9 JSX 제한 사항 및 해결 방법 JSX 제한사항 리액트에서 루트 JSX요소는 한 개여야한다.. 해결법은 최상위 태그로 무언가 하나를 만들어서 children으로 넣는것이다. JSX에는 하나를 초과하는 "root" JSX요소를 리턴 할 수 없는 한계점이 있다. 이것은 리액트 자체의 문제가 아니라 JS에서 둘 이상을 리턴 할 수 없어서 발생하는 문제이다. 그림처럼 JSX 코드는 React.createElement로 변환되기 때문에 하나만 사용 할 수 있는 것이다 해결방법 인접한 요소들을 div로 감싸면 된다. 반드시 div여야만 되는 것은 아니고 컴포넌트도 가능하다. 이렇게 div로 감싸는 방식을 선택하게 됐을때 div soup라고 불리는 새로운 문제가 발생하게 된다. 실제 DOM으로 렌더링 될 때 리액트 .. 2022. 8. 3. 이전 1 2 다음
