프론트엔드/Java Script (42) 썸네일형 리스트형 JavaScript Sec05_4 React에서 LifeCycle 제어하기 (useEffect) LifeCycle LifeCycle을 제어한다? 컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 어떤 작업을 수행시킬 수 있다는 것을 의미한다. (ex. 초기화 작업, ex.예외 처리 작업, ex. 메모리 정리 작업) 클래스형 react Component와 함수형 react Component 지금까지 우리가 사용한 것은 함수형 컴포넌트 오직 클래스형 컴포넌트만 lifecycle를 제어하는 메소드와 state 기능을 사용할 수 있는데, use 키워드를 이용하여 클래스형 컴포넌트만 근본적으로 갖고 있는 기능을 함수형 컴포넌트에서 낚아채서 사용할 수 있다. (React Hooks) useEffect react의 lifecycle을 제어하는 메소드를 가져올 수 있는 기능 의존성 배열이 변화하는 순간 콜백함수가.. JavaScript Sec 05_3 React에서 배열 사용하기 map 함수를 이용해 리스트를 작성하기 dummylist를 prop으로 전달하여 DiaryList 컴포넌트에서 diaryList라는 이름으로 dummylist 배열을 사용한다. map함수를 이용하여 dummylist 배열의 요소 하나 하나씩 접근한다. 이 요소는 id, author, content, emotion, date를 담고 있는 객체이다. DiaryItem 컴포넌트에 이 객체 요소를 prop으로 전달한다. DiaryItem 컴포넌트에서는 prop으로 전달받은 객체들을 비구조화 할당을 이용해 각각 키를 이름으로 하는 변수로 저장하여 사용한다. 데이터 추가하기 data는 위에서 아래 방향으로 흐르고 event는 역방향으로 흐른다. DiaryEditor와 DiaryList에서 사용할 공통의 데이터를 u.. JavaScript Sec 05_2 React에서 DOM 조작하기 특정 DOM element에 focus 주기 어떤 DOM element에 focus를 줘야하는지 자바스크립트 코드가 알고 있어야 하는데 이렇게 DOM element를 선택할 수 있는 기능을 react는 제공을 하고 있음 그 기능이 useRef 이다 useRef()가 반환하는 값은 React.MutableRefObject인데, 이것은 DOM요소에 접근할 수 있는 기능을 한다. const authorInput = useRef(); JavaScript Sec05_1 React에서 사용자 입력 처리하기 input 태그로 사용자 입력 처리하기 onChange라는 이벤트를 사용하여 input에 어떤 값이 입력되었을 때 그 값을 어떻게 처리할 것인지 작성한다. onChange는 input의 값이 바뀌었을 때 수행하는 이벤트이다. onChange prop에는 콜백함수를 전달한다. 이 때 onChange 이벤트에 등록되는 콜백함수는 이벤트 객체 e를 매개변수로 전달받는다. e.target 은 이벤트 객체의 target을 의미하고 여기서는 input 태그를 의미한다. e.target.value는 입력 필드에 입력된 값을 의미하는데, 상태 변화 함수인 setAuthor의 인자에 e.target.value를 넣으면 state의 값이 이 값으로 업데이트 된다. textarea 태그로 사용자 입력 처리하기 input 태.. JavaScript Sec 04_5 Props Props 컴포넌트에게 데이터를 전달하는 가장 기본적인방법 #1. 만약 Count의 초기값을 0이 아니라, App컴포넌트에서 전달하는 값으로 하고 싶다면? 부모 컴포넌트인 App컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에게 값을 넘겨주려면 위 코드와 같이 라고 작성하면 된다. ‘initialValue’라는 이름을 붙여 5라는 값을 전달한다. 부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여 값을 전달하는 방식을 Prop이라고 한다. #2. 값을 여러 개 전달하고 싶으면? 이렇게 값을 여러 개 전달할 수도 있다. Prop이 여러 개이므로 Props라고 한다. #3. 전달받은 값은 어떻게 사용할까? 부모 컴포넌트로부터 받은 값을 자식 컴포넌트가 사용하려면 인자에 ‘props’를 넣으면 된다. 이 pr.. JavaScript Sec04_4 State State 계속해서 변화하는 특정 상태 상태에 따라 각각 다른 동작을 함 리액트에서의 state : 컴포넌트가 갖는 테마처럼, 계속 값이 바뀔 동적인 데이터 예제 Counter 만들기) useState 라는 React의 메소드는 배열을 반환한다. 배열의 비구조화 할당을 통해 0번째 인덱스를 count, 1번째 인덱스를 setCount라는 상수로 받아온다. 0번째 인덱스는 상태의 값으로 사용되고 1번째 인덱스는 0번쨰 인덱스의 상태값을 변화시키는 상태 변화 함수로 사용된다. useState 메소드를 호출하면서 넘겨준 인자인 0은 count라는 상태를 만드는 데 초기값으로 사용된다. 상태 변화 함수인 setCount 인자에 값을 넣으면 그 값으로 count의 값이 바뀐다. cf) html에서는 onClick.. JavaScript Sec04_3 JSX JSX 자바스크립트의 확장 문법이자, 자바스크립트와 html을 혼합해서 쓸 수 있는 문법 리액트에서 주로 사용하는 표현식 리액트의 컴포넌트를 만드는 데 유용하게 사용하는 문법이다. JSX의 규칙 닫힘 규칙 열린 태그가 있으면 반드시 닫힌 태그도 있어야 한다 self closing tag : , 최상위 태그 규칙 최상위 태그는 return문 안에서 즉, 컴포넌트 안에서 가장 바깥에 위치하는 태그를 의미한다. JSX의 표현식은 반드시 하나의 부모 요소를 가져야 한다. JSX로 컴포넌트로 만들어서 return하려면 반드시 하나의 최상위 태그로 다른 모든 태그를 묶어주어야 한다. 만약 최상위 태그를 사용하고 싶지 않다면? 리액트 파일에서 React.Fragment를 불러와 최상위 태그 대신 감싸주면 된다. 로 .. JavaScript Sec04_2 Create React App Create React App react의 boiler plate (react를 사용할 때 필요한 여러 패키지들을 감싸고 있는 패키지) npm start로 리액트 앱이 실행이 될 때 src 디렉토리 밑에 index.js가 실행이 되면서 public 디렉토리 밑에 index.html에 있는 id가 root인 div 아래로 App.js 파일에 있는 App 함수가 들어간다. node modules node.js 패키지의 구성 요소 중 하나로 외부 모듈을 저장하고 있는 폴더 리액트도 외부 모듈이기 때문에 node modules 아래에 저장되어있다. create-react-app으로 만든 패키지는 굉장히 많은 node module을 갖고 있다. 우리가 이렇게 많은 모듈을 직접 설치할 수 없기 때문에 create-.. 이전 1 2 3 4 5 6 다음
