react

[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..

[리액트] Ref에 관하여 (useRef)

ref란 특정 DOM요소에 일종의 ID를 부여하는 것이다. ref 없이 구현할 수 있는 기능이라면 코드의 유지보수를 위해 ref 사용을 권장하지 않는다. ref를 꼭 사용해야하는 경우는 '특정 input에 포커스 부여', '스크롤 박스 조작', 'Canvas에 그리기' 등이 있다. 그리고 다른 컴포넌트 클래스의 하위 함수를 참조 할 수 있으나, React의 기본 원칙은 부모 컴포넌트와 하위 컴포넌트 사이에서만 데이터를 교류하는 것이기에 ref를 사용해 외부 컴포넌트의 함수를 참조하게 되면 스파게티 코드가 될 수 있다. 대신 context API나 리덕스를 사용하는 것이 효율적이다. 클래스형 컴포넌트에서의 ref 선언 { this.nameInputBox = ref; }}> 혹은 nameInputBox = ..

[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 컴포넌트를 사용하려면 정..