5주 회고

지난주에 계획했던 평일에 리액트 , 주말에 웹디자인 강의를 공부했던 것들을 잘지켜나갔고, 다다음주에있을프로젝트에 대해서 동일하게 계속 할예정이다. 그래서 이번주는 딱히 내용이없다. 적을게있으면 추가로 적을예정

• format_list_bulleted 활동/회고록
• · 2022. 12. 12.
• textsms

[29] 리액트 useEffect

useEffect ? 컴포넌트가 렌더링될때 특정작업을 실행할수있도록 하는 훅이다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용하여 이용할수있는데 함수형 컴포넌트에서는 useEffect를 사용하면된다. useEffect[ 함수 , 의존성배열] 첫번째인자 : 함수 리액트는 렌더링 이후에 실행할 함수( useEffect 첫번째 인자 ) 를 가지고있다 DOM 업데이트 이후 불러내게된다. 만약 첫번째 인자 함수에서 return 하게되면 그 함수가 컴포넌트 unmount 될때 실행되게된다. → 이것을 이용해서 cleanUp 함수를 작성할수도있다 두번째인자 : 의존성 배열 배열의 형태로 특정한 값이 변경될때 첫번째인자 즉 useEffect 함수를 실행시키고싶을경우 그값을 넣어준다. 예를들어 input 값안에 들어있..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 9.
• textsms

[28]리액트 ref 와 state

ref ? 컴포넌트 라이프사이클내 유지되며, 변경가능한 변수이고 값이 변할때 렌더링이되지 특징을 가지고있으며 주로 DOM 엘리먼트에 접근하여 컴폰너트의 전체 렌더링과 관계없는 작업을 할때 유용하게 사용된다. ref 와 state ref 의 특징을보면 state 와 유사한부분이있다. state 는 컴포넌트 라이프 사이클내에서 유지가되며 , 변경가능한 변수이고 , 값이 변할때 렌더링이된다는 특징이있다. 간단하게 리렌더링이 필요한 값을 다룰때는 state 를 , 아닐때는 ref를 사용한다고 보면 된다. import React, { useRef, useState } from "react"; import { Card } from "../UI/Card"; import classes from "./AddUser.mo..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 9.
• textsms

[27] 리액트 동적스타일

동적스타일 어떤 조건에 맞는 스타일속성을 지정해줄때가있다. 이런 동적인스타일을 적용시키는데에는 여러가지 방법이 존재하는데 크게 해당 요소에 인라인속성을줘서 주는방법이있고 미리 클래스에 스타일을 적용시킨다음에 해당조건에맞으면 클래스이름을 주거나 삭제시키는 방법으로 할수도있다. import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 8.
• textsms

[26] 리액트 상태 끌어올리기

리액트는 부모에서 자식 컴포넌트로 데이터를 내려주는것을 props 로 해왔다 그럼 자식에서 부모로 데이터를 이동시켜야할때는 어떻게 할까? 만약에 글작성하는 컴포넌트와 글을 보여주는 컴포넌트가 있다고 가정해봤을때 글작성에서 데이터를 입력받아 해당 데이터를 보여주는 컴포넌트로 이동할때 부모와 자식간의 구조가 아니라면 어떻게 처리를 해야될까? 부모컴포넌트에 함수를 선언하고 해당함수를 props 로 자식컴포넌트에 넘긴다 그리고 그 자식컴포넌트는 해당함수의 매개변수를 통해 전달하면 자식컴포넌트에서 부모컴포넌트로 데이터를 이동시킬수있다! 이를 코드로 한번 살펴보자 // 부모컴포넌트 const NewExpense = (props) => { // 데이터를 받기위한 함수 생성 const saveExpenseDateHan..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 6.
• textsms

[25] react 의 JSX

궁금증 리액트 create react app 의 JSX 문법은 개발자가 보기편하게 만들어준다. 근데 가끔은 리액트 컴포넌트를 보면 return 밑으로 작성된 JSX 의 코드가 원래는 어떻게 동작할까 ? 라는 의문이 들때가있다. 또한 상위요소가 필수적으로 하나가 필요해야되는 이유가 무엇인지 궁금했고, 원래는 어떤 코드였고 JSX 를통해서 보기좋게 변하게됬는지 ? 간단하게 알아보자. 먼저 기본적으로 간단한 컴포넌트를 보자. function Example() { return ( hi $1000 ); } 컴포넌트에 상위div 태그 안에 h2, div 를 나타내고있다. JSX 를 통해 상당히 개발자가 보기 편한대 아주 이전의 리액트에서는 다르게 표시했었다. import React from 'react&#3..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 5.
• textsms