react14 소플의 처음 만난 리액트_실습7 소플의 처음 만난 리액트_실습7 조건부 렌더링이란? - 조건에 따라 렌더링의 결과가 달라지도록 하는 것 엘리먼트 변수 - 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법 인라인 조건 - 조건문을 코드 안에 집어넣는 것 - 인라인 if → 논리 연산자 &&를 사용 → 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링 - 인라인 if-Else → 삼항 연산자 ?를 사용 → 앞에 나오는 조건문이 true면 첫 번째 항목을 리턴, false면 두 번째 항목을 리턴 → 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용 컴포넌트 렌더링 막기 - 리액트에서는 null을 리턴하면 렌더링되지 않음 - 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨 로그인 여부를 나타내는.. 2023. 7. 31. 소플의 처음 만난 리액트_실습6 소플의 처음 만난 리액트_실습6 이벤트란? - 사건을 의미 리액트의 이벤트 - 이벤트의 이름을 카멜 표기법으로 표기 - 이벤트를 처리할 함수를 그대로 전달 이벤트 핸들러(=이벤트 리스너) - 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 - 클래스 컴포넌트 → 클래스의 함수를 정의하고 생성자에서 바인딩해서 사용 - 함수 컴포넌트 → 함수 안에 함수로 정의하거나 화살표 함수 사용해서 정의 Arguments(=파라미터) 전달하기 - 클래스 컴포넌트 → 화살표 함수를 사용하거나 Function.prototype.bind를 사용해서 전달 - 함수 컴포넌트 -> 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용 클릭 이벤트 처리하기 실습 클래스 컴포넌트 - 클래스의 함수를 정의하고 생성자에서 바인.. 2023. 7. 31. 소플의 처음 만난 리액트_실습5 소플의 처음 만난 리액트_실습5 훅(Hook) 리액트의 state와 생명주기 기능에 갈고리(Hook)를 걸어 원하는 시점에 정해진 함수를 실행되도록 만드는 것 ♪ useState() state를 사용하기 위한 훅 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않음 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() 사용 사용법 → const [변수명, set함수명] = useState(초기값); * 변수 각각에 대해 set 함수가 따로 존재함 ♪ useEffect() 사이드 이펙트를 수행하기 위한 훅 사이드 이펙트란? 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업 useEffect() 훅만으로 클래스 컴포넌트의 생명주기 함수들과 동일한 기능을 수행할 수 있.. 2023. 7. 11. 소플의 처음 만난 리액트_실습4 소플의 처음 만난 리액트_실습4 State 리액트 컴포넌트의 변경 가능한 데이터 컴포넌트를 개발하는 개발자가 직접 정의해서 사용 state가 변경될 경우 컴포넌트가 리렌더링 됨 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 State의 특징 자바스크립트 객체 형태로 존재 직접적인 변경이 불가능 함 - 클래스 컴포넌트 생성자에서 모든 state를 한 번에 정의 state를 변경하고자 할 때에는 꼭 setState()함수를 사용해야 함 - 함수 컴포넌트 useState() 훅을 사용하여 각각의 state를 정의 각 state별로 주어지는 set함수를 사용하여 state 값을 변경 생명주기 마운트 componentDidMount() - 컴포넌트가 생성될 때 업데이트 componentDidU.. 2023. 7. 11. 이전 1 2 3 4 다음 반응형
