리액트

[React] mount시 실행되는 useEffect

함수형 컴포넌트에서는 플러터의 initState, dispose와 같이 컴포넌트가 생성(mount)되거나 해제(unmount)될 때의 호출을 useEffect를 사용해 구현한다. useEffect는 deps 값을 통해 어떤 경우에 동작할 것인지 정할 수 있다. 1. 컴포넌트가 mount 되는 최초 1회 useEffect(() => { console.log("init"); return () => { console.log("dispose"); }; }, []); return을 통해 unmount가 될 때 동작하는 dispose를 구현할 수 있다. 맨 뒤의 deps에 빈 배열을 넣어주면 최초 1회만 동작한다. 2. 특정 값이 바뀌는 경우 & mount시 useEffect(() => { console.log('..

[React] List를 컴포넌트로 렌더링

리액트에서는 state에 관련있는 모든 변수에서 불변성 유지가 상당히 중요하다. 단일 Object의 경우 추가에도 수정에도 speard(...)를 사용했지만 List의 경우에는 speard와 더불어 filter와 map을 주로 사용한다. List useState의 추가, 수정, 제거 //객채의 id를 ref로 사용한다. const nextId = useRef(1); //user를 담는 List const [userList, setResult] = useState([]); const [text, setText] = useState({ id: nextId.current, nickname: "", realname: "", isActive: false, }); const onChange = (e) ... //i..

[React] 이벤트에서 함수 호출하기

이벤트에 함수 전달하기 onClick과 같은 이벤트에는 아래와 같이 일반적으로 함수를 동작시키는 코드를 작성한다. 함수명 뒤에 ()를 붙이지 않아야한다. function onClickHandle(){ ... } 그렇다면 props를 전달하려면 어떻게 해야할까. ()를 삽입하여 props를 함수에게 전달하려면 arrow를 사용하거나 bind 함수를 사용해야한다. function onClickHandle(btnNum){ ... } //Arrow 사용 {onClickHandle(1);}}> //Bind 사용 onClick과 같이 매개인자가 전달되지 않는 함수의 경우는 반드시 arrow나 bind를 사용해야한다. onChange처럼 매개인자를 제공해주는 경우는 ()를 생략해도 된다. 이해하기 만약 arrow, ..

[React] JSX 기본 익히기

React Process index.html 에서 id가 root인 div를 호출합니다. index.js 파일의 ReactDom.render가 root에 해당합니다. root는 기본적으로 App 컴포넌트를 호출합니다. App 컴포넌트가 최상단 컴포넌트라고 할 수 있습니다. Import / Export Import는 다른 js, css, image 등의 파일 내용을 해당 파일에서 사용하기 위해 필요하다. 조금 특이한 점은 import시 대상 파일에서 사용할 컴포넌트 명을 명시해주어야한다는 점이다. import Another, {Conatiner, CustomButton} from './Container'; //Container.js 파일의 Container, CustomButton 컴포넌트를 사용하려면 정..

[React] 전통적인 Context 이해하기.

Context 리액트의 기본 흐름은 트리 구조이다. 컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다. 최상단 컴포넌트에서 최하위 컴포넌트로 props를 전달하고자 할 때, 중간의 모든 컴포넌트에서 이를 주고 받는 코드들이 포함되어야 한다. 이를 해결하기 위해 존재하는 것이 context이다. Context 정의 Context – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 공식문서에 너무 잘 정리되어있어 이를 보며 이해하는 것이 수월할 것이다. 핵심은 최상단에 context를 선언하는 것. //'light'는 기본 값 const ThemeContext = React.cre..