5. 리액트 Hooks Hooks리액트가 처음 만들어질 때부터 있던 개념은 아니지만, 새로 생긴 중요 개념이라고 생각하자.앞서서 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트로 나뉜다고 하였다. (사진 참고)이 상태에서 함수형 컴포넌트의 단점을 극복하기 위해 "Hooks"이라는 기술이 탄생하게 되었다.훅은 "갈고리"라는 뜻을 가지고 있다. 훅은 state 관련 함수, 생명 주기 관련 함수, 최적화 관련 함수 등.. 여러 함수가 존재한다.useStateState을 사용하기 위한 훅.예시 코드 >useEffectside Effect을 수행하기 위한 훅. 사이드 이펙트는 사전적 정의로 "부작용"을 뜻한다.예시 코드 >이때 의존성 배열을 생략할 수 있음. (컴포넌트가 업데이트될 때마다 호출됨)useEffect 에 대한 사용 방법 및 .. 2024. 8. 12. 4. 리액트 State and Lifecycle state는 중요하다.-코딩 애플-코딩에서 "이거 왜 쓰는 거예요? 이 개념은 무엇인가요?"에 대한 질문이 중요하다. 단순 코드 따라치기로는 코드를 해석할 수 없기 때문이다. state도 마찬가지이다. 이게 왜 쓰이는 거고 무엇인지, 개념을 설명할 수 있어야 한다.State정의로는 "상태"이다. 리액트에서는 컴포넌트의 변경 가능한 데이터라고 볼 수 있다. 그리고 state는 각각의 개발자가 함수 내에 따로 따로 정의한다. 이때 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함해야 한다. 쉽게 말해서 State는 자바스크립트의 객체라고 여기면 된다.예시 코드를 보자 > 저기 네모 박스를 친 부분이 state 코드이다. (이때 클래스 컴포넌트는 constructor(생성자)를 가지게 된다.)다시 말하.. 2024. 8. 10. 3. 리액트 Components and Props 리액트에서의 Components 그리고 Props매우 매우 매우 중요한 개념이라고 한다.....다시 말하지만, 리액트는 컴포넌트를 레고 조립하듯 코드를 작성한다. (컴포넌트 기반 언어) 이 작은 컴포넌트가 모여서 큰 컴포넌트가 모이고 이게 모여서 하나의 웹사이트 화면이 되어준다.컴포넌트는 일종의 함수라고 생각하면 편한데, 입력은 props(프랍스)인 거고 출력은 리액트 엘리먼트인 셈. 컴포넌트만 있다면 붕어빵(엘리먼트)을 계속 찍어낼 수 있다! (실제로 컴포넌트 만들 때 "function"이라고 정의함)Props(프랍스)가 무엇인가?Props는 Prop의 복수형태를 뜻한다. 그리고 이건 리액트에서 "속성"이라는 뜻으로 사용된다.그리고 이 속성은 리액트 컴포넌트의 속성을 뜻한다.예시를 들어서 설명하자면 .. 2024. 8. 9. 2. 리액트 Rendering Elements Rendering Elements 의 정의와 생김새정의적으로 Elements 이란 어떤 물체를 이루는 성분을 뜻함. (리액트를 구성하는 요소 / 가장 작은 블록) 이건 곧 리액트에서 화면을 기술하는 요소이기도 하다.이때 리액트 Elements는 자바스크립트의 객체 형태로 존재한다.잘 보면 자바스크립트 객체 같은 느낌이 들 것이다. (이름이 있고 값이 있다.)(props는 뒤에서 배울 것) 순서대로 해석하자면 type을 기재하고 props 기제, 이후 자식 요소를 기재한다. Elements의 특징 및 렌더링 Elements는 불변성을 가진다. (변하지 않는 성질) 즉, 한 번 생성된 Elements의 자식 요소나 attributes를 바꿀 수 없다는 뜻이다.이때, 무언가 이상한 점을 느낄 수 있을 텐데... 2024. 8. 8. 1. 리액트 JSX 이슈(시작하기에 앞서서... 리액트 강의가 버전 1 , 버전 2가 있는데.. 버전 2가 새롭게 리뉴얼됨에 따라 버전 1 강의는 버리고 버전 2의 강의를 듣기로 결정하게 되었다. 버전 1은 나중에 시간이 날 때 볼 듯하다.) - 기준 2024년 8월 7일.정말 다행히도 버전 2는 HTML / CSS / 자바스크립트에 대한 기본적 내용이 "준비하기" 과정에 추가되었기에 기록하는 것에는 지장이 없다. 그 뒤에 리액트 소개와 연동까지는 별 지장이 없기에 JSX부터 기록을 버전 2로 시작하게 되었음.> 이에 따라 Node.js / npm 을 설치하고 React App 연동까지 하였다. 리액트를 구동하고 싶다면 터미널을 열어서 npm start 라고 작성하면 된다.JSX란 자바스크립트 파일에서도 쓰이는 html 대.. 2024. 8. 7. 0. 리액트 소개 및 실습 리액트가 무엇인가?심플하다. 화면을 만들기 위한 자바스크립트 라이브러리(참고로 라이브러리는 프레임워크보다는 조금 더 자유롭다.)리액트는 페이스북이 만들어낸 라이브러리이다.리액트의 장점빠른 업데이트 및 빠른 렌더링 속도. 또한 Virtual DOM 이 적용되어 있다. (쉽게 말해서 "스무스"하게 움직임) 그리고 레고 조립하듯이 컴포넌스 베이스인 라이브러리이다. 즉 이것은 "재사용성"이 좋다는 뜻이기도 하다. 이것은 곧 개발 속도를 빠르게 만든다. 무엇보다 "가장 많이 쓰이는 프론트엔드 라이브러리". 이것이 가장 큰 장점이다. (커뮤니티가 많음)+ (React Native 까지 배우면 모바일도 커버됨리액트의 단점뭐든 그렇지만, 새로운 기술에는 새로운 개념이 등장해서 생소함. 무엇보다 프론트엔드 시장의 기술은.. 2024. 8. 6. 이전 1 2 다음
