728x90 네이티브3 [리액트] useEffect 로 렌더링할 때 특정 작업 수행하기 useEffect 란 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 할 수 있는 Hook 함수 코드1. 렌더링될 때마다 실행하기 두번째 파라미터를 넣지 않으면, 렌더링될 때마다 첫번째 파라미터로 넣은 함수를 실행 import React, { useState, useEffect } from 'react'; const Info = () => { const [name, setName] = useState(''); // 초기값 ''으로 설정 useEffect(() => { // 두번째 파라미터를 넣지 않으면 렌더링될 때마다 첫번째 파리미터로 넣은 함수를 실행 console.log('렌더링 완료'); console.log({name}); }); const onChangeName = e => { // i.. 2023. 2. 1. [리액트] useState로 상태 관리하기 목표 리액트에서 상태를 관리하는 hook 함수인 useState를 활용 input 태그에 입력된 데이터를 출력 코드 import React, { useState } from 'react'; const Info = () => { const [name, setName] = useState(''); // 초기값 ''으로 설정 const onChangeName = e => { // input 입력시 호출할 함수 setName(e.target.value); // input 데이터를 setName의 파라미터로 입력 }; return ( 이름: {name} ); }; export default Info; 2023. 2. 1. [리액트 네이티브] 게시글에 더보기 접어두기 버튼 만들기 목표 글 내용이 50자를 초과하는 경우 글을 자른다. 줄여진 글임을 표시하기 위해 잘린 글 마지막에 [...더보기] 를 표시한다. [...더보기] 버튼을 누르면 글 전체 내용을 표시한다. 전체 글을 다시 줄이기 위해 글 마지막에 [...접어두기]를 표시한다. 코드 import React, {useState} from 'react'; import {Pressable, Text} from 'react-native'; function Test() { const contents = '글내용'; const [activContent, setActiveContent] = useState(false); const textSummary = value => { if (!activContent && value.length .. 2023. 1. 26. 이전 1 다음 728x90
